欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

CSS 之 定位（position）

程序员文章站 2024-01-29 18:17:52
...

一、基本介绍

CSS position属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。

取值：
static
该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
relative（相对定位）
该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置
absolute（绝对定位）
不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
fixed（固定定位）
不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变绝对定位。

语法:

    position: static;
        初始值 static
        是否是继承属性 否

二、快速入门案例

01相对定位relative.html

<head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            CSS position属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。
            取值：
            static
            该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
            relative（相对定位）
            该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置
            absolute（绝对定位）
            不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
            fixed（固定定位）
            不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变绝对定位

        -->
        <!--相对定位 relative
            参照物：content box
            文档残留：相对定位元素会在文档流中有残余。
            方向：
               left top ：这对方向符合web坐标 x轴正方向朝左，y轴正方向朝下）
               right bottom ：这对方向符合数学坐标（x轴正方向朝右，y轴正方向朝上）
                     即上面两组 坐标体系正方向相反
               默认值:0
              继承性:
        -->
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .mpos,.pos{
                width: 200px;
                height: 200px;
                display: inline-block;
            }
            .mpos{
                background: blue;
            }
            /*相对定位元素会在文档流中有残余*/
            .pos{
                background: red;
                position: relative;



                /*页面上等价于上面lefttop
                right: -100px;
                bottom: -100px;*/
            }
        </style>
    </head>
    <body>
        <div class="mpos"></div>
        <div class="pos"></div>

    </body>

02绝对定位absolute.html

<head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            absotute:绝对定位
                                 绝对定位参照物：一个绝对定位的元素参照于离最近的开启定位的祖先元素，如果没有任何开启定位的祖先元素，参照初始包含块（一个视窗大小的矩形，默认情况下位置和视窗一致），
        -->
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .mpos {
                background: blue;
            }

            .pos {
                width: 200px;
                height: 200px;
                background: blue;
                position: relative;
            }
        </style>
    </head>

    <body>
        <div class="mpos">mpos</div>
        <div class="pos">pos</div>
    </body>

03固定定位fixed.html

<head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            fixed：固定定位 
            参照:视图(拉动系统滚动条时,视窗改变)

        -->
    <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #app{
                position: fixed;
                right: 50px;
                bottom: 50px;
                width:200px;
                height:200px;
                background: pink;
            }
        </style>
    </head>
    <body>
        <div id="app">app</div>
        123 <br />  123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br />
        123 <br />  123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br />
        123 <br />  123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br />
        123 <br />  123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br />
        123 <br />  123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br />
        123 <br />  123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br />
        123 <br />  123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br />
        123 <br />  123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br />
        123 <br />  123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br />
        123 <br />  123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br />
        123 <br />  123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br />
        123 <br />  123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br />
        123 <br />  123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br />
        123 <br />  123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br /> 123 <br />
    </body>

三、包含块

1、基本介绍
一个元素的尺寸和位置经常受其包含块的影响。大多数情况下，包含块就是这个元素最近的祖先块元素的内容区，但也不是总是这样。

2、包含块的重要性
元素的尺寸及位置，常常会受它的包含块所影响。对于一些属性，例如 width, height, padding, margin，绝对定位元素的偏移值 （比如 position 被设置为 absolute 或 fixed），当我们对其赋予百分比值时，这些值的计算值，就是通过元素的包含块计算得来。
3、确定包含块
确定包含块的过程完全依赖于这个包含块的 position 属性：

1）如果 position 属性为 static 或 relative ，包含块就是由它的最近的祖先块元素（比如说inline-block, block 或 list-item元素）或格式化上下文(比如说 a table container, flex container, grid container, or the block container itself)的内容区的边缘组成的。
2）如果 position 属性为 absolute ，包含块就是由它的最近的 position 的值不是 static （也就是值为fixed, absolute, relative 或 sticky）的祖先元素的内边距区的边缘组成。
3）如果 position 属性是 fixed，包含块就是由 viewport (in the case of continuous media) 或是组成的。
如果 position 属性是 absolute 或 fixed，包含块也可能是由满足以下条件的最近父级元素的内边距区的边缘组成的：

  • A transform or perspective value other than none
  • A will-change value of transform or perspective
  • A filter value other than none or a will-change value of filter (only works on Firefox).

4、根据包含块计算百分值
如上所述，如果某些属性被赋予一个百分值的话，它的计算值是由这个元素的包含块计算而来的。这些属性包括盒模型属性和偏移属性：

1）要计算 height top 及 bottom 中的百分值，是通过包含块的 height 的值。如果包含块的 height 值会根据它的内容变化，而且包含块的 position 属性的值被赋予 relative 或 static ，那么，这些值的计算值为 0。
2）要计算 width, left, right, padding, margin 这些属性由包含块的 width 属性的值来计算它的百分值。

5、代码示例：

<head>
        <meta charset="UTF-8">
        <title></title>
    <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #test{
                position: relative;
                width:500px;
                height:500px;
                border: 1px solid;
                margin: 50px 0 0 50px;
                background: gray;
            }
            #wrap{
                width:400px;
                height:400px;
                border: 1px solid;
                margin: 50px 0 0 50px;
                background: green;
            }
            #app{
                /*一个绝对定位的元素参照于 离他最近的开启定位的祖先元素*/
                /*如果没有任何开启定位的祖先元素---> 初始包含块
                                            ----> 一个视窗大小的矩形,默认情况下位置和视窗一致*/


                /*绝对定位参照于谁做编译?
                    包含块
                */
                position: absolute;
                left: 0;
                top: 0;
                width:50%;
                height:50%;
                background: pink;
            }
        </style>
    </head>
    <body>
        <div id="test">
            <div id="wrap">
                <div id="app">app</div>
            </div>
        </div>
    </body>

6、总结：
CSS 之 定位（position）

四、定位元素

<head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            定位元素时： fixed absotute可指定高宽
        -->
        <style type="text/css">
            #p1{
                position: relative;
                width: 200px;
                height: 200px;
                background: pink;
            }#p2{
                position: absolute;
                width: 200px;
                height: 200px;
                background: blue;
            }
            /*#p3{
                position: fixed;
                width: 300px;
                height: 300px;
                background: red;
            }*/
        </style>
    </head>
    <body>
        <div>
            <span id="p1">
            123
        </span>
        </div><div>

        <span id="p2">
            123
        </span>
        </div>
        <div>
            <span id="p3">
            123
        </span>
        </div>


    </body>

五、 z-index

1、基本介绍
z-index 属性指定了一个具有定位属性的元素及其子代元素的 z-order。 当元素之间重叠的时候，z-order 决定哪一个元素覆盖在其余元素的上方显示。 通常来说 z-index 较大的元素会覆盖较小的一个。
取值：
auto
元素不会建立一个新的本地堆叠上下文。当前堆叠上下文中新生成的元素和父元素堆叠层级相同。
<integer>
整型数字是生成的元素在当前堆叠上下文中的堆叠层级。元素同时会创建一个堆叠层级为0的本地堆叠上下文。这意味着子元素的 z-indexes 不与元素外的其余元素的 z-indexes 进行对比。
语法：

    z-index: auto;
        初始值 auto
        是否是继承属性 否

2、代码示例：

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #app{
                position: relative;
                left: 100px;
                top: 100px;
                /*z-index: 1;*/

                width:200px;
                height:200px;
                background: yellow;
            }
            #app div{
                position: relative;
                z-index: 10;

                width:100px;
                height:200px;
                background: pink;
            }
            #app2{
                position: relative;
                z-index: 2;
                width:200px;
                height:200px;
                background: deeppink;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div>

            </div>
        </div>
        <div id="app2">app2</div>
    </body>

六、解决IE6下fixed定位失效

1、基本介绍

  • 1.禁止系统滚动条
  • 2.body的尺寸与视口的尺寸保持一致
  • 3.让滚动条出现在body身上
  • 4.要让固定定位这个元素 参照初始包含块进行绝对定位

2、代码示例

<head>
        <meta charset="UTF-8">
        <title>解决IE6下fixed定位失效</title>
        <!--1.禁止系统滚动条
    系统滚动条不在<html> <body> ,但可以设置属性overflow:hidden去控制
                              区别：html 作用于系统，
              body：当HTML body同时出现overflow属性时，html作用于系统，body作用于自身
        html{
            overflow：hidden;
        }
    2.body的尺寸与视口的尺寸保持一致
        html{
            height:100%;
            width:100%
        }
        body{
            height:100%;
            width:100%
        }
    3.让滚动条出现在body身上
        html和body必须都得有overflow属性
        html{
            overflow：hidden;
        }
        body{
            overflow：auto;
        }
    4.要让固定定位这个元素 参照初始包含块进行绝对定位-->
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            /*2.body的尺寸与视口的尺寸保持一致*/

            html,
            body {
                height: 100%;
                width: 100%;
            }

            html {
                /*1.禁止系统滚动条*/
                overflow: hidden;
            }
            /*3.让滚动条出现在body身上
                html和body必须都得有overflow属性，但属性值不同
                html overflow: hidden;
                body overflow:auto;*/

            body {
                overflow: auto;
            }

            .ie6 {
                width: 100px;
                height: 100px;
                background: blue;
                /*4.要让固定定位这个元素 参照初始包含块进行绝对定位*/
                position: absolute;
                right: 50px;
                bottom: 50px;
            }
        </style>

    </head>

    <body>
        <!--设置溢出域-->
        <div style="height: 3000px;width: 30px;background: pink;"></div>
        <div class="ie6"></div>
    </body>
相关标签： 定位（position） z-index 解决IE6下fixed定位失效 包含块 定位元素

上一篇： javascript - 关于WEB前后端分离，服务器端数据返回问题

下一篇： Javaweb-服务端与客户端的信息识别-Session与Cookie

推荐阅读