1. static

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>position</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            .static {
                position: static;
                top: 10px;
                left: 10px;
                width: 100px;
                height: 200px;
                background: yellow;
            }
        </style>
    </head>
    <body>
        <div class="static">
        </div>
    </body>
</html>

金黄色方块会在左上角显示，没有偏移。

 

2. fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

这个比较好理解，只和窗口有关，与父元素，文档流都无关。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>position</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            .fixed-outer {
                position: fixed;
                top: 20px;
                left: 20px;
                width: 20px;
                height: 20px;
                background: yellow;
            }
            .fixed-inner {
                position: fixed;
                top: 40px;
                left: 40px;
                width: 20px;
                height: 20px;
                background: red;
            }
        </style>
    </head>
    <body  bgcolor="#999">
        <div class="fixed-outer">
            <div class="fixed-inner">
            </div>
        </div>
    </body>
</html>

left就是左边界距离视窗左边距的位置，right就是右边界距离视窗右边距的位置，top，bottom同理。top和bottom或者left和right同时存在，只有top或者left生效。

小广告效果：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>position</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            .fixed {
                position: fixed;
                right: 0px;
                bottom: 50px;
                width: 200px;
                height: 100px;
                background: yellow;
            }
        </style>
    </head>
    <body>
        <div class="fixed">
        </div>
        <p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
        <p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
        <p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
        <p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
        <p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
    </body>
</html>

 

3. relative

生成相对定位的元素，相对于其正常位置进行定位。

相对元素正常应该在的位置移动，元素所占的空间位置不变，但是显示的位置发生偏移。

left是向右偏移，right是向左偏移（这么说好奇怪，但是…应该没错吧……），top向下偏移，bottom向上偏移。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>position</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            .div {
                width: 100px;
                height: 100px;
                border: 1px solid;
                float: left;
            }
            .relative1 {
                position: relative;
                left: 10px;
                top: 10px;
                border-color: red;
            }
            .relative2 {
                position: relative;
                right: 10px;
                bottom: 10px;
                border-color: green;
            }
        </style>
    </head>
    <body>
        <div class="div"></div>
        <div class="div relative1"></div>
        <div class="div"></div>
        <div class="div relative2"></div>
    </body>
</html>

 

4. absolute 

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。(如果没有这样的父元素呢？emmm……应该是整个文档最外层的框……吧……

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

absolute元素会附带 display:block 效果，同时，设置absolute后，元素会脱离文档流。

1. 如果不设置”left”, “top”, “right” 以及 “bottom”，会显示在正常应该显示的位置。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>position</title>
        <style>
            .relative {
                width: 300px;
                height: 300px;
                border: 1px solid;
                position: relative;
                left: 100px;
                top: 100px;
            }
            .absolute {
                position: absolute;
                width: 100px;
                height: 100px;
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <div class="relative">
            outer
            <div class="absolute"></div>
        </div>
    </body>
</html>

2. 设置了偏移……（一下父元素全部指 static 定位以外的第一个父元素

设置了left 将以父元素的左边界为基准 向右偏移 垂直方向和之前相同。

设置了right 将以父元素的右边界为基准 向左偏移 垂直方向和之前相同。

设置了top 将以父元素的上边界为基准 向下偏移 水平方向和之前相同。

设置了bottom 将以父元素的下边界为基准 向上偏移 水平方向和之前相同。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>position</title>
        <style>
            .relative {
                width: 300px;
                height: 300px;
                border: 1px solid;
                position: relative;
                left: 100px;
                top: 100px;
            }
            .absolute1, .absolute2, .absolute3, .absolute4, .absolute5 {
                position: absolute;
                width: 100px;
                height: 100px;
                border: 2px solid red;
            }
            .absolute2 {
                left: 60px;
                border-color: green;
            }
            .absolute3 {
                right: 10px;
                border-color: yellow;
            }
            .absolute4 {
                top: 0;
                border-color: pink;
            }
            .absolute5 {
                bottom: 10px;
                border-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="relative">
            outer
            <div class="absolute1"></div>
            <div class="absolute2"></div>
            <div class="absolute3"></div>
            <div class="absolute4"></div>
            <div class="absolute5"></div>
        </div>
    </body>
</html>

 

5. others

inherit：继承父元素的值。

initial： 初始值，即默认值，static。

unset： 非继承属性，相当于initial，static。

 

6. navigation bar

效果见右下角 >_<

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>position</title>
        <style>
            .right-nav * {
                margin: 0;
                padding: 0;
            }
            .right-nav {
                position: fixed;
                right: 10px;
                bottom: 150px;
            }
            .right-nav li {
                list-style-type: none !important;
                position: relative;
            }
            .right-nav li a {
                text-decoration: none;
                display: block;
                width: 150px;
                line-height: 30px;
                text-align: center;
                background: #666;
                border-bottom: 1px solid;
                color: #fff;
            }
            .right-nav li a:hover, .right-nav li a:active  {
                background: #ccc;
            }
            .right-nav .summary {
                position: absolute;
                right: 150px;
                top: 0px;
                line-height: 30px;
                height: 30px;
                width: 400px;
                background: #ccc;
                color: #fff;
                text-align: center;
                display: none;
            }
            .right-nav li:hover .summary {
                display: block;
                font-size: 12px;
                border-right: 1px solid #fff;
            }
        </style>
    </head>
    <body>
        <div class="right-nav">
            <ul>
                <li><a href="http://www.cnblogs.com/wenruo/p/8488254.html#static">1. static</a>
                    <div class="summary">默认值。没有定位，元素出现在正常的流中。</div>
                </li>
                <li><a href="http://www.cnblogs.com/wenruo/p/8488254.html#fixed">2. fixed</a>
                    <div class="summary">生成绝对定位的元素，相对于浏览器窗口进行定位。</div>
                </li>
                <li><a href="http://www.cnblogs.com/wenruo/p/8488254.html#relative">3. relative</a>
                    <div class="summary">生成相对定位的元素，相对于其正常位置进行定位。</div>
                </li>
                <li><a href="http://www.cnblogs.com/wenruo/p/8488254.html#absolute">4. absolute</a>
                    <div class="summary">生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。</div>
                </li>
                <li><a href="http://www.cnblogs.com/wenruo/p/8488254.html#others">5. others</a>
                    <div class="summary">inherit & initial & unset</div>
                </li>
                <li><a href="http://www.cnblogs.com/wenruo/p/8488254.html#navigation-bar">6. navigation bar</a>
                    <div class="summary">根据定位写一个导航栏。</div>
                </li>
            </ul>
        </div>
    </body>
</html>

 

。

.right-nav * { margin: 0; padding: 0 }
.right-nav { position: fixed; right: 10px; bottom: 150px }
.right-nav li { list-style-type: none !important; position: relative }
.right-nav li a { text-decoration: none; display: block; width: 150px; line-height: 30px; text-align: center; background: rgba(102, 102, 102, 1); border-bottom: 1px solid; color: rgba(255, 255, 255, 1) }
.right-nav li a:hover, .right-nav li a:active { background: rgba(204, 204, 204, 1) }
.right-nav .summary { position: absolute; right: 150px; top: 0; line-height: 30px; height: 30px; width: 400px; background: rgba(204, 204, 204, 1); color: rgba(255, 255, 255, 1); text-align: center; display: none }
.right-nav li:hover .summary { display: block; font-size: 12px; border-right: 1px solid rgba(255, 255, 255, 1) }

  • 1. static

    默认值。没有定位，元素出现在正常的流中。
  • 2. fixed

    生成绝对定位的元素，相对于浏览器窗口进行定位。
  • 3. relative

    生成相对定位的元素，相对于其正常位置进行定位。
  • 4. absolute

    生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
  • 5. others

    inherit & initial & unset
  • 6. navigation bar

    根据定位写一个导航栏。

版权声明：本文为wenruo原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/wenruo/p/8488254.html