CSS基础（四）---定位、叠放次序、元素的显示与隐藏

原创已于 2025-09-17 14:50:25 修改 · 985 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#css #学习 #前端

于 2025-09-12 20:14:27 首次发布

前端html+css 专栏收录该内容

9 篇文章

订阅专栏

CSS属性书写顺序（重点）：

1.布局定位属性：display/position/float/clear/visibility/overflow（建议display第一个写，毕竟关系到模式）

2.自身属性：width/height/margin/padding/border/background

3.文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word

4.其他属性（CSS3）：content/cursor/border-radius/text-shadow/background:linear-gradient...

1、定位

定位可以实现：

某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。

当我们滚动屏幕时，盒子是固定在屏幕的某个位置的。

1）定位组成

定位=定位模式+边偏移

定位模式决定定位方式，由css的position属性设置。边偏移决定最终位置，有top、bottom、left、right4个属性。

边偏移决定最终位置，有top、bottom、left、right4个属性。（注意：如果一个盒子既有left属性也有right属性，则默认会执行left属性；同理，top和bottom会执行top属性）

（1）静态定位（了解）

默认定位方式。（没有边偏移）

语法：选择器{ position: static; }

（2）相对定位relative（重要）

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。

语法：选择器{ position: relative; }

特点：它是相对于它原来的位置来移动的；原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来的位置）。

如果下面的盒子是相对定位，上100px，左100px，则：

（3）绝对定位（重要）

绝对定位是元素在移动位置的时候，是相对于它的祖先元素来说的。

语法：选择器{ position: absolute; }

特点：1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为准进行定位（Document文档）；

绿色盒子是移动后的位置，距离上红线和左红线100px；

2.如果祖先元素有定位，则以最近一级的有定位的祖先元素为参考点移动位置。

3.绝对定位不再保留原先的位置（脱标）。

子级是绝对定位的话，父级要用相对定位。

1.子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。

2.父盒子需要加定位限制子盒子在父盒子内显示。

3.父盒子布局时，需要占有位置，因此父亲只能是相对定位。

子绝父相：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位。

注意：子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。

（4）固定定位

固定定位：元素固定于浏览器可视区的位置。

语法：选择器{ position: fixed; }

特点：以浏览器的可视窗口为参照点移动元素；跟父元素没有关系；不随滚动条滚动；固定定位不再占有原先的位置（脱标）。

固定定位的盒子固定在版心的右侧：让盒子left：50%,走到浏览器可视区的一半位置；再让盒子margin-left：版心宽度的一半距离。

<style>
        .banxin {
            width: 400px;
            height: 700px;
            background-color: skyblue;
            margin: 0 auto;
        }

        .fixed {
            position: fixed;
            left: 50%;
            margin-left: 200px;
            width: 50px;
            height: 100px;
            background-color: pink;
        }
    </style>

<body>
    <div class="fixed"></div>
    <div class="banxin">版心盒子</div>
</body>

（5）粘性定位（了解）

可以被认为是相对定位和固定定位的混合。网页中最开始随滚轮的滚动而滚动，到某一个位置时，不滚动（eg：淘宝）

语法：选择器{ position: sticky;top: 10px; }

特点：以浏览器的可视窗口为参考点移动元素（固定定位特点）；粘性定位占有原先的位置（相对定位特点）；必须添加top、left、right、bottom其中一个才有效。

跟页面滚动搭配使用。兼容性较差，IE不支持。

    <style>
        body {
            height: 3000px;
        }

        .nav {
            position: sticky;
            top: 10px;
            width: 800px;
            height: 50px;
            background-color: skyblue;
            margin: 100px auto;
        }
    </style>

<body>
    <div class="nav">导航栏</div>
</body>

（6）总结

2）定位叠放次序 z-index

在使用定位布局时，可能会出现盒子重叠的情况，此时，可以使用z-index来控制盒子的前后次序（z轴）。

语法：选择器{ z-index: 1; }

        1.数值可以是正整数、负整数或0，默认是auto，数值越大，越靠上（数值大的盒子会压住数值小的盒子）。

        2.如果属性相同，则按书写顺序，后来者居上。

        3.数字后面不能加单位。

        4.只有定位的盒子才有z-index属性。

3）定位拓展

（1）让绝对定位的盒子居中

注意：加了绝对定位的盒子不能通过margin:0 auto水平居中。

<style>
        .box {
            position: absolute;
            left: 50%;
            margin-left: -50px;
            top: 50%;
            margin-top: -25px;
            width: 100px;
            height: 50px;
            background-color: skyblue;
            /* margin: auto; */
        }
    </style>

<body>
    <div class="box"></div>
</body>

（2）定位特殊特性

绝对定位和固定定位也和浮动类似。

1.行内元素添加绝对或者固定定位，可以直接设置高度和宽度。

2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

（3）脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位（固定定位）元素都不会触发外边距合并的问题。

（4）绝对定位（固定定位）会完全压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）。

但是绝对定位（固定定位）会压住下面标准流的所有内容。

浮动之所以压不住文字，是因为浮动产生的目的最初是为了做文字环绕效果的。

<style>
        .box {
            float: left;
            width: 100px;
            height: 50px;
            background-color: skyblue;
            /* margin: auto; */
        }
    </style>

<body>
    <div class="box"></div>
    <p>遇事不决，可问春风</p>
</body>

<style>
        .box {
            position: absolute;
            /* float: left; */
            width: 100px;
            height: 50px;
            background-color: skyblue;
            /* margin: auto; */
        }
    </style>

2、网页布局总结

1）标准流：可以让盒子上下排列或者左右排列，垂直的块级只显示就用标准流布局。

2）浮动：可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。

3）定位：可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。

3、元素的显示与隐藏

1）dispaly显示隐藏

display属性用于设置一个元素应如何显示。

display：none；（重点）隐藏对象（注意：隐藏后，不再保留原有的位置）

display：block；除了转换为块级元素外，还有显示元素的意思

2）visibility显示隐藏

inherit：继承上一个父元素的可见性

visibility：visible；对象可视

visibility：hidden；对象隐藏（注意：隐藏后，继续占有原来的位置）

3）overflow溢出显示隐藏

overflow属性指定了如果内容溢出一个元素的框（超出其指定高度及宽度）时，会发生什么。

overflow：visible 显示内容

overflow：hidden隐藏内容

overflow：scroll总是显示滚动条

overflow：auto在需要时剪切内容并添加滚动条

注意：如果有定位的盒子，请慎用overflow：hidden隐藏内容，因为它会隐藏多余的部分。

土豆案例

    <style>
        .tudou {
            position: relative;
            width: 444px;
            height: 320px;
            background-color: skyblue;
            margin: 30px auto;

        }

        .tudou img {           
            width: 100%;
            height: 100%;
        }

        .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center center;
        }

        /* 当鼠标经过图片，mask盒子显示 */
        .tudou:hover .mask {
            display: block;
        }
    </style>

<body>
    <div class="tudou">
        <div class="mask"></div>
        <img src="images/tudou.jpg" alt="">
    </div>
</body>