CSS定位

Echo.....

于 2022-08-20 19:27:09 发布

阅读量62

点赞数

分类专栏： CSS 文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_61810345/article/details/126442727

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.相对定位

相对定位：position:relativee;

相对原来位置进行指定的偏移（上下左右）

相对定位的话，它仍然在标准文档流中，原本的位置会被保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--    相对定位：相对自己原来的位置进行偏移
    
            -->
    <style>
        
        body{
            padding: 20px;
        }
        
        div {
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;

        }

        #father {
            border: 1px solid black;
            padding: 0px;
        }

        #first {
            background: #ff2600;
            border: 1px dashed red;
            position: relative;/*    相对定位：上下左右*/
            top: -20px;/*上*/
            left: 20px;/*左*/
        }

        #second {
            background: #fff200;
            border: 1px dashed #f7ff00;
        }

        #third {
            background: #08ff00;
            border: 1px dashed #00ffd9;
            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>

2.绝对定位

定位：基于XXX定位，上下左右

相对父级或者浏览器进行指定的偏移（上下左右）

绝对定位的话，它仍然在标准文档流中，原本的位置不1会被保留

1.没有父级元素定位的前提下，根据浏览器定位

2.假设父级元素存在定位，我们通常会相对于父级元素定位、

3.在父级元素范围内移动

position: absolute;
            right: 100px;
            top: 10px;

3.固定定位

不管怎么样移动网页，该定位不会移动

position: fixed;
            right: 0;
            bottom: 0;

4.z-index

图层 z-index:默认是0，最高无限~999

#content {
    width: 400px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px black solid;
}

ul, li {
    padding: 0;
    margin: 0;
    list-style: none;
}

/*父级元素相对定位*/
#content ul {
    position: relative;

}

.tipText, .tipBg {
    position: absolute;
    width: 400px;
    height: 25px;
    top: 210px;
}

.tipText {
    color: white;
    z-index: 999;
}

.tipBg {
    background: black;
    opacity: 0.5; /*背景透明度    */
}

Echo.....

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS定位

1.相对定位相对定位：position:relativee;2.绝对定位定位：基于XXX定位，上下左右相对父级或者浏览器进行指定的偏移（上下左右）绝对定位的话，它仍然在标准文档流中，原本的位置不1会被保留3.固定定位不管怎么样移动网页，该定位不会移动4.z-index图层 z-index:默认是0，最高无限~999
复制链接

扫一扫

专栏目录