前端：定位，display，visibility，overflow

最新推荐文章于 2025-04-17 09:35:08 发布

alicca

最新推荐文章于 2025-04-17 09:35:08 发布

阅读量102

点赞数

文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/alicca/article/details/134437089

版权

本文详细介绍了CSS中的定位方法（static,relative,absolute,fixed），以及display、visibility和overflow属性的作用。通过实例分析了这些概念在网页布局中的应用，包括如何实现元素的隐藏与显示、滚动和层叠效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Display，visibility，overflow

定位

定位=定位模式+边偏移
定位模式：position：static，relative，absolute，fixed
边偏移：top bottom left right

1）静态定位

{position : static}
- 静态定位按照标准流特性摆放位置，没有边偏移

2）相对定位

{position: relative}

只有相对定位能使用margin: 0 auto来居中显示

- 相对定位：相对原来位置
top:100 水平坐标走了100，相当于原来位置在现在的位置的上方100

虽然盒子走了但是原来位置还保留着(不脱标)

3) 绝对定位

绝对定位absolute，相对于祖先元素
{position:absolute}

如果没父元素或父元素没定位，就以浏览器为准
(1)如果嵌套爷爷和父亲，只有爷爷有定位，以爷爷为准

(2) 如果嵌套的爷爷和父亲都有定位，以就近的父亲为准
绝对定位脱离标准流，不占用原来的位置, 父亲一定要占有原来的位置，而孩子不用

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

position:absolute后
left:50%
margin-left: -100px
如果后面又写了margin：auto那后面会覆盖前面的

垂直居中：

.box {
	position: absolute;
	left: 50%;
	margin-left: -100px;

	top: 50%；
	margin-top:-100px;
}

.box-bd ul li {
	position: relative;
	不加这句话，hot会跑浏览器右上角
}

.box-bd ul li>img {
这里是对于li里的亲儿子img
	width: 100%;
这句意思是和父容器的宽度一样
}
.box-bd ul li em {
	position: absolute;
	top:0;
	right:0
	这意思是在右上角

}

4）固定定位

固定定位特点：

1跟父元素没有关系。

2不随着滚动条滚动（都不占用位置，可以看作正方形）

先走浏览器一半再走版心一半：

.fixed {
	position: fixed;
	left: 50%;
	利用margin走版心一半
	margin-left: 400px;
}
将边栏固定在贴近父容器的边边上

5）子绝父相

相的原因是不脱标

z-index数值越大，盒子越靠上，默认是auto
如果属性值相同，按照书写顺序后来居上
z-index数字后不能加单位（只有定位的盒子有这个属性）

绝对定位和固定定位也和浮动类似：
1行内元素添加绝对或固定定位，可以直接设置高度和宽度
2块级元素添加绝对或固定定位不给宽度或高度默认大小是内容大小
3脱标盒子不会触发外边距塌陷（合并）问题

绝对定位（固定定位）会完全压住盒子，包含文字

浮动元素不同，只会压住楼下盒子但是不会压住楼下的图片/文字
浮动：原本产生原因就是文字环绕效果

由于小箭头压住父盒子，以父盒子为标准，不能用fixed，fixed以浏览器为准
相对定位又压不住盒子，只能用绝对定位，float相当于文字环绕

并集选择器可以集体声明相同样式：
.prev, .next{ }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .taobao {
            position: relative;
            width: 520px;
            height: 280px;
            margin: 100px auto;
        }

        .taobao img {
            width: 520px;
            height: 280px;


        }

        .tab,
        .tab1 {
            position: absolute;
            top: 50%;
            margin-top: -15px;
            /* 高度一半 */
            height: 30px;
            width: 20px;
            background-color: rgba(0, 0, 0, .3);
            text-decoration: none;
            color: aliceblue;
            line-height: 30px;
            text-align: center;


        }

        .tab {
            left: 0;
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
        }

        .tab1 {
            right: 0;
            /* 分别一个是left一个是right没有重叠，这样对于一个盒子既有left又有right就跑左边了，同理执行top */
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
        }

        .wh {
            position: absolute;
            bottom: 10px;
            left: 50%;
            margin-left: -35px;
            width: 70px;
            height: 13px;
            background-color: rgba(255, 255, 255, .3);
            border-radius: 7px;
            /* 也是高度一半，尽量凑整数 */

        }

        .wh li {
            float: left;
            height: 8px;
            width: 8px;
            background-color: #fff;
            list-style: none;
            border-radius: 50%;
            margin: 3px;

        }

        .wh li:hover {
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="taobao">
        <img src="tb.jpg">
        <div class="tab">
            &lt;
        </div>
        <div class="tab1">
            &gt;
        </div>
        <ul class="wh">

            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>


    </div>
</body>

</html>

Display，visibility，overflow

让一个元素在页面中隐藏或者显示出来

1 display

显示隐藏
display: none；隐藏对象，而且后面的盒子会占据它的位置（用的多！）
display: block;除了转换为块级元素还可能让元素显示

2 visibility

visibility：visible;
visibility:hidden;隐藏元素后，继续占有原来的位置

3 overflow

溢出盒子的内容部分：visible |auto |hidden|scroll
不是隐藏元素，只是把多出内容隐藏，只显示在盒子里的部分

auto：超出则显示滚动条，不超出则不显示；但是scroll不管内容是否超出都显示滚动条

如果有定位的盒子，少用hidden
最大区别：是否保留位置

4 土豆网案例

核心原理：原先半透明黑色盒子看不见，鼠标经过才显示
这个盒子不占有位置，需要绝对定位+display

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wh {
            position: relative;
            width: 444px;
            height: 320px;
            margin: 100px auto;

        }

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

        .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .3) url(arr.png) no-repeat center;
            /* 错因，一开始写的background-color */

        }

        .wh:hover .mask {
            display: block;
            /* 真正显示出来的不是wh而是mask */
        }
    </style>
</head>

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


    </div>

</body>

</html>