相对定位：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. ubuntu中桌面图标的配置

    在网上随处可以找到怎么样把应用程序的图标放到桌面上,我刚用ubuntu时也是按照网上的做法,一步一步的做的,现将网上的做法复制下来: 桌面配置文件简述\label{sec:desktop file} ...

  2. Intellij IDEA 如何使用Jrebel热部署

    My Jrebel 已经不再提供免费使用了,或使用破解版Jrebel 或可以移步至 HotSwapAgent,或使用破解的Jrebel. 一个java web项目,在写的过程中我们需要不断调试,如果没 ...

  3. 2019-4-6-VisualStudio-2019-如何离线下载

    title author date CreateTime categories VisualStudio 2019 如何离线下载 lindexi 2019-04-06 09:26:11 +0800 2 ...

  4. H3C 计算子网内可用主机地址数

  5. Centos 7.5安装 Redis 5.0.0

    1 我的环境  1.1 linux(腾讯云) CentOS Linux release 7.5.1804 (Core)  1.2 Redis Redis 5.0.0 2 下载 官网 官网下载地址 3 ...

  6. 构建锁与同步组件的基石AQS：深入AQS的实现原理与源码分析

    Java并发包(JUC)中提供了很多并发工具,这其中,很多我们耳熟能详的并发工具,譬如ReentrangLock.Semaphore,它们的实现都用到了一个共同的基类--AbstractQueuedS ...

  7. flask的url处理器（url_defaults和url_value_preprocessor）

    url处理器的作用:对于一部分资源, 你并不是很清楚该如何设定其 URL 相同的部分.例如可能有一些URL包含了几个字母来指定的多国语言语种,但是你不想在每个函数里都手动识别到底是哪个语言 rom f ...

  8. 【题解】有标号的DAG计数4

    [HZOI 2015] 有标号的DAG计数 IV 我们已经知道了\(f_i\)表示不一定需要联通的\(i\)节点的dag方案,考虑合并 参考[题解]P4841 城市规划(指数型母函数+多项式Ln),然 ...

  9. $Noip2010/Luogu1525$ 关押罪犯 贪心

    $Luogu$ $Sol$ 贪心.尽量把怨气值大的罪犯放到两个监狱,所以首先要按照怨气值从大到小排序.当扫描到两个罪犯已经被指定到同一个监狱时,就结束循环,这个怨气值就是答案.当然把怨气值大的两个罪犯 ...

  10. $cometoj\#4\ D\ $求和 不是$dp$

    \(Des\) \(Sol\) \(upd:\)以下两段是错误做法,但我不想删掉\(.jpg\) -----------------------以下是错误部分--------------------- ...