21、绝对定位和固定定位

最新推荐文章于 2022-02-07 17:47:29 发布

工一木子

最新推荐文章于 2022-02-07 17:47:29 发布

阅读量174

点赞数

分类专栏： CSS学习文章标签： css html html5

本文链接：https://blog.csdn.net/Prince140678/article/details/120393475

版权

CSS学习专栏收录该内容

24 篇文章 0 订阅

订阅专栏

6.2、绝对定位

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

1.没有父级元素定位的前提下，相对于浏览器定位

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

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

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

<!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 #666;
                padding: 0;
                position:relative;

            }
            #first {
                border: 1px dashed #661b50;
                background-color: red;
            }
            #second {
                border: 1px dashed #426615;
                background-color: orange;
                position: absolute;
                right: 30px;
                left:-10px;
            }
            #third {
                border: 1px dashed #171a66;
                background-color: yellow;

            }
        </style>
    </head>
    <body>
        <div id="father">
            <div id="first">第一个盒子</div>
            <div id="second">第二个盒子</div>
            <div id="third">第三个盒子</div>
        </div>
    </body>
</html>

效果图：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DjHf4Dn8-1632131139142)(C:\Users\Administrator\Desktop\学习笔记\前端学习\CSS\21、绝对定位和固定定位.assets\image-20210920173710936.png)]$

6.3、固定定位：fixed

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body {
                height:1000px;
            }
            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: 0;
            }
        </style>
    </head>
    <body>
        <div>div1</div>
        <div>div2</div>
    </body>
</html>

效果图：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hb4BWiB5-1632131139145)(C:\Users\Administrator\Desktop\学习笔记\前端学习\CSS\21、绝对定位和固定定位.assets\image-20210920174503649.png)]$

应用场景：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XgiiENGZ-1632131139148)(C:\Users\Administrator\Desktop\学习笔记\前端学习\CSS\21、绝对定位和固定定位.assets\image-20210920174528739.png)]$