CSS定位

2024-04-06 18:34:44

6.定位

6.1 相对定位

6.2 绝对定位

6.3 z-index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>默认情况</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #888;
            padding: 0;

        }
        #first{
            background-color: lemonchiffon;
            border: 1px dashed #82881b;
        }
        #second{
            background-color: #62ffbb;
            border: 1px dashed #258837;
        }
        #third{
            background-color: #ff6452;
            border: 1px dashed #5d8dfc;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>

</div>

</body>
</html>

6.1 相对定位

相对定位：position: relative

相对原来的位置，进行指定的偏移，相对定位的话，它任然在标准文档流中，原来的位置会被保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
<!--相对定位
相对于自己原来的位置进行偏移
-->
<style>
    body{
        padding: 20px;
    }
    div{
        margin: 10px;
        padding: 5px;
        font-size: 12px;
        line-height: 25px;
    }
    #father{
        border: 1px solid #888;
        padding: 0;

    }
    #first{
        background-color: lemonchiffon;
        border: 1px dashed #82881b;
        position: relative; /* 相对定位*/
        top: -20px;
        left:20px;
    }
    #second{
        background-color: #62ffbb;
        border: 1px dashed #258837;
    }
    #third{
        background-color: #ff6452;
        border: 1px dashed #5d8dfc;
        position: relative;
        bottom: 10px;
        right: 20px;
    }
</style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>

</div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>方块定位</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 2px solid #ff70e6;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            background: #258837;
            line-height: 100px;
            text-align: center;
            color: white;
            display:block;
        }
        a:hover{
            background: #82881b;
        }
        .a2,.a4{
            position: relative;
            left: 200px;
            top: -100px;
        }
        .a5{
            position: relative;
            left: 100px;
            top: -300px;
        }
    </style>
</head>
<body>
<div id="box">
    <a href="#" class="a1">链接1</a>
    <a href="#" class="a2">链接2</a>
    <a href="#" class="a3">链接3</a>
    <a href="#" class="a4">链接4</a>
    <a href="#" class="a5">链接5</a>
</div>

</body>
</html>

6.2绝对定位

1.定位：基于xxx定位，上下左右

没有父级元素定位的前提下，相对于浏览器定位
假设父级元素存在定位，我们通常会相对于父级进行偏移
在父级元素范围内移动

相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #888;
            padding: 0;
            position: relative;

        }
        #first{
            background-color: lemonchiffon;
            border: 1px dashed #82881b;
        }
        #second{
            background-color: #62ffbb;
            border: 1px dashed #258837;
            position: absolute;
            right: 30px;
            top: -10px;
        }
        #third{
            background-color: #ff6452;
            border: 1px dashed #5d8dfc;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>

</div>

</body>
</html>

6.3 固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style>
        body{
            height: 10000px;
        }
        div:nth-of-type(1){/*绝对定位：相对于浏览器*/
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){ /*fixed  固定定位*/
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0px;
            
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

6.4 z-index

像图层一样一层叠一层

z-index：默认是0，最高无限制

opacity: 0.5%; /*背景透明度*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-index</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content">
    <ul>
        <li><img src="image/2.png" alt=""></li>
        <li class="tipText"> 学习</li>
        <li class="tipBg"></li>
        <li>时间：2025-0-1</li>
        <li>地点</li>
    </ul>
</div>
</body>
</html>



CSS
#content{
    width: 380px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px #000000 solid;

}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 380px;
    height: 25px;
    top:216px;
}
.tipText{
    color: black;
    /*z-index: 0;*/
}
.tipBg{
    background: #000000;
    opacity: 0.5%; /*背景透明度*/
    filter: Alpha( opacity=50);  /*IE8之前的版本支持 后面的不支持*/
}

7 动画

转载https://www.cnblogs.com/xiaohuochai/p/5289143.html

码农公寓

6.2绝对定位

6.3 固定定位

6.4 z-index

7 动画

相关文章