前端第一阶段-15（position定位、元素的隐藏overflow 、display、visibility、opacity 区别）

BadVictory

已于 2022-08-11 13:41:10 修改

阅读量166

点赞数

分类专栏： # 前端开发第一阶段文章标签： css html css3 visual studio html5

于 2022-08-06 18:50:45 首次发布

本文链接：https://blog.csdn.net/Victory_bad/article/details/126186065

版权

前端开发第一阶段专栏收录该内容

20 篇文章 4 订阅

订阅专栏

本文深入探讨了CSS中的position属性，包括相对定位、固定定位和绝对定位的原理与用法，并介绍了元素隐藏的方法，如overflow、display、visibility和opacity的区别及其效果。

摘要由CSDN通过智能技术生成

position定位

position定位是指定一个元素在文档中的定位方式

position属性值
属性值	说明
position: relative;	相对定位相对于自身位置，不会脱离文档流
position: absolute;	绝对定位相对于最近一级添加了position定位的父元素，会脱离文档流
position: fixed;	固定定位相对于浏览器窗口，不会随着页面滚动，会脱离文档流
static	默认

方位关键词属性
属性	说明
top	上
right	右
bottom	下
left	左
center	中间

相对定位

相对定位position: relative; 参考的基准：相对于自身位置为基准

代码：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background: #666;
        }
        .relative1{
            width: 500px;
            height: 50px;
            background: rgb(238, 142, 142);
        }
        .relative2{
            width: 500px;
            height: 50px;
            background: rgb(238, 142, 142);
            /* 定位 相对定位*/
            position: relative;
            /* 坐标 */
            /* 参考的基准：相对于自身位置为基准 */
            top: 20px;
        }
        .relative3{
            width: 500px;
            height: 50px;
            background: rgb(238, 142, 142);
            /* 定位 相对定位*/
            position: relative;
            /* 坐标 */
            /* 参考的基准：相对于自身位置为基准 */
            right: 20px;
        }
        .relative4{
            width: 500px;
            height: 50px;
            background: rgb(238, 142, 142);
            /* 定位 相对定位*/
            position: relative;
            /* 坐标 */
            /* 参考的基准：相对于自身位置为基准 */
            bottom: 20px;
        }
        .relative5{
            width: 500px;
            height: 50px;
            background: rgb(238, 142, 142);
            /* 定位 相对定位*/
            position: relative;
            /* 坐标 */
            /* 参考的基准：相对于自身位置为基准 */
            left: 20px;
        }
    </style>
</head>
<body>
        <h1 class="relative1">此h1未定位</h1>
        <h1 class="relative2">position:relative; top:20px;</h1>
        <h1 class="relative3">position:relative; right:20px;</h1>
        <h1 class="relative4">position:relative; bottom:20px;</h1>
        <h1 class="relative5">position:relative; left:20px;</h1>
</body>

</html>

效果：

固定定位

固定定位position: fixed; 参考的基准：以浏览器为基准

代码：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ad{
            width: 50px;
            height: 50px;
            background: rosybrown;
            /* 定位固定位置 */
            position: fixed;
            /* 坐标 */
            /* 参考的基准：以浏览器为基准 */
            top: 20px;
            left: 20px;
        }
    </style>
</head>
<body>
    <div class="ad">广告</div>
        <h1>position: fixed;</h1>
        <h1>position: fixed;</h1>
        <h1>position: fixed;</h1>
        <h1>position: fixed;</h1>
        <h1>position: fixed;</h1>
</body>

</html>

效果：

绝对定位

绝对定位position: absolute; 参考的基准：以父元素为基准

以父元素.box为基准对.left-icon， .right-icon，.circle-box子元素进行定位

代码：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            /* 
                相对定位
                位置不会变
                不会脱离文档流
                只是做一个基准
            */
            position: relative;
            width: 700px;
            height: 500px;
        }

        img {
            width: 700px;
            height: 472px;
        }

        .left-icon,
        .right-icon {
            width: 50px;
            height: 50px;
            background: rgba(0, 0, 0, 0.6);
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .left-icon {
            /* 绝对定位 */
            position: absolute;
            /* 坐标 */
            left: 0;
            top: calc(50% - 25px);
        }

        .right-icon {
            /* 绝对定位 */
            position: absolute;
            /* 坐标 */
            right: 0;
            top: calc(50% - 25px);
        }

        .circle-box {
            width: 200px;
            height: 30px;
            background: rgba(255, 255, 255, 0.6);
            display: flex;
            justify-content: center;
            align-items: center;
            /* 绝对定位 */
            position: absolute;
            top: calc(86%);
            right: calc(50% - 100px);
        }
        .circle-box>span{
            width: 8px;
            height: 8px;
            border: 1px solid yellow;
            border-radius: 50%;
            margin: 0px 8px;
            /* margin-top: -80px; */
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="./images/bj.jpg" alt="">
        <div class="left-icon">&lt;</div>
        <div class="right-icon">&gt;</div>
        <div class="circle-box">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</body>

</html>

效果：

元素的隐藏

overflow 处理溢出 overflow-y overflow-x

hidden 溢出隐藏
scroll 溢出出现滚动条

display 消失不占位置的

none 消失
block flex 恢复就会显示

visibility 能见度占位置

hidden 隐藏
visible 显示（默认值）

opacity 透明度占位置

opacity 和 rgba 的区别

opacity 作用于整个元素，后代后会被影响

rgba 只会影响颜色

图片效果小练习

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            background: rgb(182, 198, 226);
        }
        .box{
            width: 200px;
            height: 100px;
            margin: 100px auto;
            /* 相对定位 */
            position: relative;
            /* 溢出隐藏 */
            overflow: hidden;
        }
        .box:hover{
            cursor: pointer;
        }
        .box img{
            width: 200px;
        }
        .box:hover .box-title{
            bottom:0px;
        }
        .box-title{
            width: 200px;
            height: 30px;
            font-size: 12px;
            /* 绝对定位 */
            position: absolute;
            left: 0px;
            bottom: -30px;
            /* 过渡 */
            transition: 0.5s;
        }
        .box-title p{
            height: 30px;
            width: 200px;
            background: rgba(0,0,0,0.4);
            color: white;
        }
        .box img:hover{
            /* 变换 */
            transform: scale(1.1);
        }

    </style>
</head>
<body>
    <div class="box">
        <img src="./bj.jpg" alt="">
        <div class="box-title">
            <p>图片hover效果</p>
        </div>
    </div>
</body>
</html>

效果：