相对定位：position:relative

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

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>相对定位</title>
  8.     <style>
  9. * {
  10.   margin: 0;
  11.   padding: 0;
  12. }
  13. .top {
  14.     height: 100px;
  15.     width: 100px;
  16.     margin: 50px;
  17.     background-color: pink;
  18.     /* position: relative;
  19.     top:100px;
  20.     bottom: 100px; */
  21. }
  22.  /* .bottom {
  23.     height: 100px;
  24.     width: 120px;
  25.     background-color: yellow;
  26. }    */
  27.     </style>
  28. </head>
  29. <body>
  30.     <div class="top"></div>
  31.     <div class="bottom"></div>
  32. </body>
  33. </html>

　效果图如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>相对定位</title>
  8.     <style>
  9. * {
  10.   margin: 0;
  11.   padding: 0;
  12. }
  13. .top {
  14.     height: 100px;
  15.     width: 100px;
  16.     margin: 50px;
  17.     background-color: pink;
  18.     /* 设定相对位置 */
  19.     position: relative;
  20.     top:100px;
  21.     bottom: 100px;
  22. }
  23.  /* .bottom {
  24.     height: 100px;
  25.     width: 120px;
  26.     background-color: yellow;
  27. }    */
  28.     </style>
  29. </head>
  30. <body>
  31.     <div class="top"></div>
  32.     <div class="bottom"></div>
  33. </body>
  34. </html>

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

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

初始状态如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>相对定位</title>
  8.     <style>
  9. * {
  10.   margin: 0;
  11.   padding: 0;
  12. }
  13. .top {
  14.     height: 100px;
  15.     width: 100px;
  16.     background-color: pink;
  17.     /* 设定相对位置
  18.     position: relative;
  19.     top:100px;
  20.     bottom: 100px; */
  21. }
  22.  .bottom {
  23.     height: 100px;
  24.     width: 100px;
  25.     background-color: yellow;
  26. }
  27.     </style>
  28. </head>
  29. <body>
  30.     <div class="top"></div>
  31.     <div class="bottom"></div>
  32. </body>
  33. </html>

　效果图如下：

设定了相对定位后：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>相对定位</title>
  8.     <style>
  9. * {
  10.   margin: 0;
  11.   padding: 0;
  12. }
  13. .top {
  14.     height: 100px;
  15.     width: 100px;
  16.     background-color: pink;
  17.     /* 设定相对位置 */
  18.     position: relative;
  19.     top:100px;
  20.     bottom: 100px;
  21. }
  22.  .bottom {
  23.     height: 100px;
  24.     width: 120px;
  25.     background-color: yellow;
  26. }
  27.     </style>
  28. </head>
  29. <body>
  30.     <div class="top"></div>
  31.     <div class="bottom"></div>
  32. </body>
  33. </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. H3C IEEE EUI-64格式

  2. java打包上传服务器的一些命令

    Maven下package打包成jar包和war包,都在target目录下 其中War包扔在tomcat的webapps目录下.随tomcat启动自行启动 运行jar包命令. nohup java - ...

  3. 【GYM102091】2018-2019 ACM-ICPC, Asia Nakhon Pathom Regional Contest

    A-Evolution Game 题目大意:有$n$个不同的野兽,定义第$i$ 个野兽有 $i$ 个眼睛和 $h[i]$ 个角,你可以任意从中选择一个野兽进行进化,每次进化角数量必须增加,而且进化后要 ...

  4. C#面试题整理2（带答案）

    一.C# 理论 1.1.简述 private. protected. public. internal.protected internal 访问修饰符和访问权限 private : 私有成员, 在类 ...

  5. Python安装jpype调用java，安装jaydebeapi通过jdbc连接数据库

    pip install JPype1或下载JPype1-0.7.0.tar.gz包 经常出现需要安装VC++服务等 测试代码如下: # Author: zfh import jpype,os,time ...

  6. 微信小程序样式wxss各种问题总结（不断更新）

    1)加入其它样式文件 @import '/css/dialog.wxss'; //注意:必须结尾用分号 2)隐藏滚动条 ::-webkit-scrollbar { width:; height:; c ...

  7. jsp页面出错 Cannot call sendRedirect() after the response has been committed

    sendRedirect()不能多次调用,检查下代码

  8. github权限管理

    引用自:https://www.cnblogs.com/zhaoyanjun/p/5882784.html 前言: 在上一篇文章中Android github 快速实现多人协作 (http://www ...

  9. requests爬取豆瓣top250电影信息

    ''' 1.爬取豆瓣top250电影信息 - 第一页: https://movie.douban.com/top250?start=0&filter= - 第二页: https://movie ...

  10. 【题解】BZOJ4883: [Lydsy1705月赛]棋盘上的守卫(最小生成基环森林)

    [题解]BZOJ4883: [Lydsy1705月赛]棋盘上的守卫(最小生成基环森林) 神题 我的想法是,每行每列都要有匹配且一个点只能匹配一个,于是就把格点和每行每列建点出来做一个最小生成树,但是不 ...