CSS position 属性

顺晟科技

2022-09-13 12:41:18

147

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>

。

1. static 默认值。没有定位，元素出现在正常的流中。
2. fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。
3. relative 生成相对定位的元素，相对于其正常位置进行定位。
4. absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
5. others inherit & initial & unset
6. navigation bar 根据定位写一个导航栏。

上一篇：实施CSS职位详细信息和一般应用程序下一篇：CSS Position 定位属性

网站建设

Css