相对定位：position:relative

特点：a.相对于自己原来位置的定位，以自己的左上角为基准。

b.相对定位原来的位置仍然算位置，不会出现浮动现象。

以下为初始位置：（可以看出设置margin和position的区别）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>相对定位</title>

    <style>

* {

  margin: 0;

  padding: 0;

}

.top {

    height: 100px;

    width: 100px;

    margin: 50px;

    background-color: pink;

    /* position: relative;

    top:100px;

    bottom: 100px; */

}

 /* .bottom {

    height: 100px;

    width: 120px;

    background-color: yellow;

}    */

    </style>

</head>

<body>

    <div class="top"></div>

    <div class="bottom"></div>

</body>

</html>

　效果图如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>相对定位</title>

    <style>

* {

  margin: 0;

  padding: 0;

}

.top {

    height: 100px;

    width: 100px;

    margin: 50px;

    background-color: pink;

    /* 设定相对位置 */

    position: relative;

    top:100px;

    bottom: 100px;

}

 /* .bottom {

    height: 100px;

    width: 120px;

    background-color: yellow;

}    */

    </style>

</head>

<body>

    <div class="top"></div>

    <div class="bottom"></div>

</body>

</html>

设定相对定位之后的效果图：

top设置相对定位，bottom不设置定位：

初始状态如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>相对定位</title>

    <style>

* {

  margin: 0;

  padding: 0;

}

.top {

    height: 100px;

    width: 100px;

    background-color: pink;

    /* 设定相对位置

    position: relative;

    top:100px;

    bottom: 100px; */

}

 .bottom {

    height: 100px;

    width: 100px;

    background-color: yellow;

}

    </style>

</head>

<body>

    <div class="top"></div>

    <div class="bottom"></div>

</body>

</html>

　效果图如下：

设定了相对定位后：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>相对定位</title>

    <style>

* {

  margin: 0;

  padding: 0;

}

.top {

    height: 100px;

    width: 100px;

    background-color: pink;

    /* 设定相对位置 */

    position: relative;

    top:100px;

    bottom: 100px;

}

 .bottom {

    height: 100px;

    width: 120px;

    background-color: yellow;

}

    </style>

</head>

<body>

    <div class="top"></div>

    <div class="bottom"></div>

</body>

</html>

效果图如下：

day6 相对定位：position:relative的更多相关文章

  1. 层模型--相对定位(position:relative)

    如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left.right.top.bottom属性确定元素在正常文档流中的偏移位置.相对定位完成的过程 ...

  2. 相对定位position: relative;

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. CSS绝对定位和相对定位 position: absolute/relative

    absolute(绝对定位): 会把对象拖离HTML文档流,并通过top, left, right, bottom确定对象的具体位置,这个四个位置属性至少要设置一个,否则无法激活对象的absolute ...

  4. CSS position relative absolute fixed

    position属性absolute与relative 详解   最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...

  5. css - position relative与display table-cell深入分析

    在很多时候,想使用 display: table; 以及其子元素使用 display: table-cell 都只是为了使用 vertical-align 这一属性.这是一个很简单的常识,但这次在项目 ...

  6. 解决td标签上的position:relative属性在各浏览器中的兼容性问题

    在css中的position属性规定了页面元素的定位类型,它有以下几个值: absolute:绝对定位,相对于static以外的第一个父元素进行定位: fixed:生成绝对定位的元素,相对于浏览器窗口 ...

  7. css中position:relative的真正理解

    其实话说一直以来也没真正去理解好position:relative的用法的真实意义. 我想很多人实实在在用的多都是position:relative和position:absolute结合起来一起用的 ...

  8. css position relative obsolution

    层级关系为:<div ——————————— position:relative; 不是最近的祖先定位元素,不是参照物<div—————————-没有设置为定位元素,不是参照物<di ...

  9. position relative

    position的默认值是static,(也就是说对于任意一个元素,如果没有定义它的position属性,那么它的position:static) 如果你想让这个#demo里的一个div#sub相对于 ...

随机推荐

  1. 2018-2-13-win10-uwp-获取指定的文件-AQS

    title author date CreateTime categories win10 uwp 获取指定的文件 AQS lindexi 2018-2-13 17:23:3 +0800 2018-2 ...

  2. requires php ~7.1 -> your PHP version (7.0.18) does not satisfy that requirement

    一个大兄弟本地用了 PHP 7.1 进行开发,而我本地是 PHP 7.0, 于是悲剧发生了. composer install 之后报错 Loading composer repositories w ...

  3. AI百度接口以及图灵接口的使用

    百度AI接口 AI智能种类方向 耳朵 = 倾听 = 麦克风 = 语音识别 ASR:Automatic Speech Recognition 嘴巴 = 诉说 = 扬声器 = 语音合成 TTS:Text ...

  4. linux 运行处理者

    如同前面建议的, 当内核收到一个中断, 所有的注册的处理者被调用. 一个共享的处理者 必须能够在它需要的处理的中断和其他设备产生的中断之间区分. 使用 shared=1 选项来加载 short 安装了 ...

  5. 【t056】智力问答(multiset做法)

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 新年联欢会上,G.Sha负责组织智力问答节目.G.Sha建立了一个很大很大的超级题库,并衡量了每道题的 ...

  6. Linux 内核热插拔操作

    热插拔事件的实际控制是通过一套存储于 kset_hotplug_ops 结构的方法完成. struct kset_hotplug_ops { int (*filter)(struct kset *ks ...

  7. Linux 内核同步 urb

    不幸的是, 同步 urb 没有一个象中断, 控制, 和块 urb 的初始化函数. 因此它们必须在 驱动中"手动"初始化, 在它们可被提交给 USB 核心之前. 下面是一个如何正确初 ...

  8. 聊聊固态硬盘1--人生头两块SSD

    第一块固态硬盘--浦科特m6s   来源:京东双11   价格:319rmb           第二款固态--饥饿鲨ocz arc100   来源:美国亚马逊 黑色星期五 价格:366rmb     ...

  9. Java Developer's Guide to SSL Certificates

    https://www.codebyamir.com/blog/java-developers-guide-to-ssl-certificates Overview When developing w ...

  10. c++ vector 的坑

    一个空的vector执行pop_back操作会发生什么 由于之前看STL源码剖析的时候,发现所执行的操作如下: 只是简单的将末尾的finish迭代器减1后destroy.这让人产生一个疑问:假如这个v ...