CSS定位 CSS 定位机制

CSS代码:

.p1 {    position: relative;    left: 30px;}.p2 {    position: relative;    right: 30px;} 

效果图：

解释：

position: relative;参考的是自己原来得位置。 第一行文字设置postion为relative，这并不会造成什么反应，但是我们还给p1设置了left: 30px;，这就会使元素距离左侧产生30px的间距。 同样，第二行文字设置right: 30px，会使元素距离右侧30px的间距，就产生了跑到屏幕外面的情况 第三方没有做任何处理，正常显示 注意，一定要设置好position: relative;，否则top、right、bottom、left是不起作用的。

position: absoulte;

HTML代码:

啦啦啦啦啦
我是h1大标题
 

CSS代码:

.h1 {    position: absolute;    top: 100px;    left: 100px;} 

没有设置CSS样式的样子：

设置了CSS样式后的样子：

解释：

postion: absolute;参考的是自身的包含块，也就是自己的父视图 当设置了position: absolute;属性之后，标签的位置就变得绝对了。这个时候我们设置top、right、bottom、left其中的任何一个属性，都可以设置标签的位置。 注意，一定要设置好position: absolute;，否则top、right、bottom、left是不起作用的。

position: fixed;

HTML代码:

    我是p one
    我是p two
 

CSS代码:

.one {    position: fixed;    top: 100px;    left: 30px;}.two {    position: fixed;    top: 50px;    right: 30px;} 

效果展示：

解释：

position: fixed;参考系是浏览器的窗口 当给标签设置了position: fixed;属性之后，这些标签就只会相对于浏览器窗口进行位置的设定，忽略网页的滚动 同样，如果不设置postion: fixed;属性，而是直接设置top、right、bottom、left都不会起作用

参考文章：http://www.w3school.com.cn/css/css_positioning.asp

关于界面排布优先级的问题 z-index

         Document        div{      width: 100px;      font-size: 50px;      position: absolute;      height: 100px;    }    .a{      background-color: red;      left: 0;      top: 0;        /*设置优先级，数字越大，放置越靠前*/      z-index: 3;    }    .b{      background-color: blue;      left: 40px;      top: 40px;      z-index: 2;    }    .c{      background-color: green;      left: 80px;      top: 80px;      z-index: 100;    }     
1

      
查看更多关于2016.3.14CSS定位第六天_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did111384