定位

定位用来控制元素的位置

定位的关键字是position,position有4个值,分别是relative,absolute,static,fixed当元素定位以后,元素有4个值可以用,分别是left,right,top,bottom.

我用以下几个例子来演示absolute绝对定位和relative相对定位

1.我定义了一个main里面套着三个div,部分代码如下

#main{
    width: 800px;
    height: 400px;
    background: #ccc;
}
#main div{
    width: 200px;
    height: 100px;
    display: inline-block;
}
#div1{
    background: red;
}
#div2{
    background: blue;
    position: relative;
    left: 50px;
    top: 50px;
}
#div3{
    background: green;
}

  1. <body>
  2. <div id="main">
  3.     <div id="div1">a</div>
  4.     <div id="div2">b</div>
  5.     <div id="div3">c</div>
  6. </div>
  7. </body>

2.然后我给div2加了定位,如下

  1. #div2{
  2.     background: blue;
  3.     position: relative;
  4.     left: 50px;
  5.     top: 50px;
  6. }

由此可以看出,相对定位relative相对于元素初始位置,并且空间不释放

3.在1的基础上增加div2样式如下

  1. #div2{
  2.     background: blue;
  3.     position: absolute;
  4.     left: 50px;
  5.     top: 50px;
  6. }

由此可以看出,absolute相对于body定位,absolute空间释放

同样的 ,我将main用margin-left和margin-top让它向右下方蹿100px,而不用定位,然后将b做absolute定位,代码如下

  1. #main{
  2.     width: 800px;
  3.     height: 400px;
  4.     background: #ccc;
  5.     margin-left: 100px;
  6.     margin-top: 100px;
  7. }
  8. #main div{
  9.     width: 200px;
  10.     height: 100px;
  11.     display: inline-block;
  12. }
  13. #div1{
  14.     background: red;
  15. }
  16. #div2{
  17.     background: blue;
  18.     position: absolute;
  19.     left: 50px;
  20.     top: 50px;
  21. }
  22. #div3{
  23.     background: green;
  24. }

此时可以看出absolute还是相对于body,因为我没有给main定位

4.在1的基础上增加main样式如下

  1. #main{
  2.     width: 800px;
  3.     height: 400px;
  4.     background: #ccc;
  5.     position: relative;
  6.     left: 50px;
  7.     top: 50px;
  8. }

由此可得,当给main定位并且加参数时,会看到main带着三个div往下窜

5.在4的基础上,给div2添加样式,如下

  1. #main{
  2.     width: 800px;
  3.     height: 400px;
  4.     background: #ccc;
  5.     position: relative;
  6.     left: 50px;
  7.     top: 50px;
  8. }
  1. #div2{
  2.     background: blue;
  3.     position: absolute;
  4.     left: 50px;
  5.     top: 50px;
  6. }

空间还会释放,但b不再相对于body,而是相对于main.也就是说,某一个子元素定位并且是绝对定位,这个时候它相对于最近的已定位的祖先元素.

Static静态定位是默认值,元素出现在正常的流,没有left,right,top,bottom这四个值.

Fixed和absolute的唯一区别是:absolute是根据最近的定位的祖先元素确定自己的位置,而fixed永远根据浏览器确定位置,即使窗口为滚动窗口也不会移动.不占据空间.

z-index

  1. #main{
  2.     width: 800px;
  3.     height: 400px;
  4.     background: #ccc;
  5.     position: relative;
  6.     left: 100px;
  7.     top: 100px;
  8. }
  9. #main div{
  10.     width: 200px;
  11.     height: 100px;
  12.     display: inline-block;
  13. }
  14. #div1{
  15.     background: red;
  16. }
  17. #div2{
  18.     background: blue;
  19.     position: absolute;
  20.     left: 50px;
  21.     top: 50px;
  22. }
  23. #div3{
  24.     background: green;
  25. }

 

这段代码以及运行后如上图所示,但是现在我需要a在上面不被b覆盖,我需要改变它的层叠关系,这时候用到了z-index,它用控制定位元素的层级关系.z-index我将它翻译成z轴的索引.当我用z-index的时候,必须给当前的加定位,简单来说就是让谁在上面,就给谁定位然后加z-index.定位元素默认z-index=0.代码示例如下

  1. #main{
  2.     width: 800px;
  3.     height: 400px;
  4.     background: #ccc;
  5.     position: relative;
  6.     left: 100px;
  7.     top: 100px;
  8. }
  9. #main div{
  10.     width: 200px;
  11.     height: 100px;
  12.     display: inline-block;
  13. }
  14. #div1{
  15.     background: red;
  16.     position: absolute;
  17.     left: 0;
  18.     top: 0;
  19.     z-index: 1;
  20. }
  21. #div2{
  22.     background: blue;
  23.     position: absolute;
  24.     left: 50px;
  25.     top: 50px;
  26. }
  27. #div3{
  28.     background: green;
  29. }

a看起来没动,但z-index值改变,绝对定位元素空间释放,所以c跑到a下面去了.

定位以及z-index的更多相关文章

  1. 快捷定位目录 z武器

    z的源码在这里:https://github.com/rupa/z/blob/master/z.sh 1.把源码复制到你的用户目录下的z.sh文件, 2.然后用vim打开.bashrc这个目录,在最后 ...

  2. 前端2 — CSS — 更新完毕

    1.CSS是什么? 指:Cascading Style Sheet  --- 层叠样式表 CSS 即:美化网页( 在HTML不是说过W3C规定网页为三种标准嘛,结构层HTML已经玩了,而这个CSS就是 ...

  3. CSS定位(postion)和移动(float)

    5.定位和移动:Positioning(定位)CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么. 元素可以使用的顶部,底部,左侧和右侧 ...

  4. CSS Positioning(定位)

    Positioning(定位) CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么. 元素可以使用的顶部,底部,左侧和右侧属性定位.然而 ...

  5. css显示display、可见性visibility、定位position、对齐

    隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为"hidden",但是这两种方法会产生不同的结果. display ...

  6. CSS 基础 例子 定位及z-index

    position 属性指定了元素的定位类型. position 属性的四个值: static    不设置默认为该值,即没有定位,元素出现在正常的流中.不能使用top,bottom,left,righ ...

  7. CSS Position(定位)

    CSS Position(定位) 一.CSS Position(定位) position 属性指定了元素的定位类型. position 属性的五个值: static relative fixed ab ...

  8. css总结1:position定位:absolute/relative/fixed

    1 [Positioning(定位)] Positioning作用:指定了元素的定位类型.position包括四个值:static,relative,fixed,absolute. css定位解析:元 ...

  9. CSS:CSS Positioning(定位)

    ylbtech-CSS:CSS Positioning(定位) 1.返回顶部 1. CSS Positioning(定位) position 属性指定了元素的定位类型. position 属性的四个值 ...

  10. 教你玩转CSS Position(定位)

    CSS Position(定位) position 属性指定了元素的定位类型. position 属性的五个值: static relative fixed absolute sticky 元素可以使 ...

随机推荐

  1. MATLAB的三维散点图

    MATLAB中三维散点图函数为scatter3(x,y,z) 三维火柴图为stem3(x,y,z)

  2. Django中 如何修改models字段的默认值

    场景描述: 在建表的时候,新闻表的内容简介字段,给的默认值是可以为空的,但是没有设置默认值为blank,那么,这种情况下,对于只有标题,没有内容简介的新闻来讲,发布之后,前端显示的内容简介位置是non ...

  3. C#微信公众平台接入示例代码

    http://mp.weixin.qq.com/wiki/17/2d4265491f12608cd170a95559800f2d.html 这是微信公众平台提供的接入指南.官网只提供了php的示例代码 ...

  4. js取当前周几

    纯javascript取当前周几 var dayNames = new Array("星期天","星期一","星期二","星期三& ...

  5. add user and grant privileges on mariadb

    create database foo_db; create user foo_user identified by 'foo_password'; grant all on foo_db.* to ...

  6. RF Firefox Profile

    默认情况下,robot framework是启动不带任何配置信息的firefox,如果需要启动带有profile的话,增加一个参数即可,如 Open Browser https://aws-qa5.i ...

  7. div 纯数字很长时无法折行解决

    <div style="width:100%;word-wrap:break-word;word-spacing:normal;"> </div> 加上红色 ...

  8. Unity StrangeIoC框架

    Unity StrangeIoC框架  http://blog.csdn.net/y1196645376/article/details/52746251    

  9. 关于JSF中immediate属性的总结(二)

    The immediate attribute in JSF is commonly misunderstood. If you don't believe me, check out Stack O ...

  10. Redis安装测试(待完善)

    1 Redis安装 在网址http://redis.io/下载redis-3.2.3.tar.gz,解压. 进入解压目录 编译和安装,具体配置项可参考自带的README.md文件 make test ...