postion absolution relative fixed static 使用

来源：互联网发布：淘宝宝贝重新编辑编辑：程序博客网时间：2024/05/17 23:11

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <style type="text/css">            .static {                background-color: red;                left: 90px;//无效            }            .relative {                background-color: orange;                top: 100px;                left: 90px;                position: relative;            }            .absolute {                background-color: green;                top: 100px;                position: absolute;            }            .absolute2 {                background-color: green;                top: 300px;                position: absolute;            }            .fixed {                background-color: blue;                top: 50px;                right: 50px;                left: 50px;                position: fixed;            }        </style>    </head>    <body>        <div class="static">div postion default static</div>        <div class="relative">div postion relative</div>        <div class="absolute">div postion absolute</div>        <div class="fixed">div postion fixed</div>        <div class="absolute2">            out absolute            <div class="relative">inner relative</div>        </div>        <div class="relative">            out relative            <div class="absolute">inner absolute</div>        </div>    </body></html>

遵循正常文档流
- static 默认的.可以不写什么都没有
- relative. 相对自己正常的位置的偏移.本来应该在的位置的偏移.

脱离正常文档流
- absolute left top bottom right 都有效, 相对于 static 定位以外的第一个父元素进行定位. 如果没有设定 trbl的话.那么就相对于父元素.
- fixed left top bottom right 都有效. 但是是针对浏览器窗口的. 随着浏览器的变化而变化.但是不随滚动条的变化而变化. 最常用的是固定页面的head部分. 就像excel中的冻结首行首列.

常用relative 在外层内层用absolute来配合使用.就不用使用浮动来解决问题了.

阅读全文

0 0