CSS3定位

YourLie_in_April

已于 2022-04-08 14:47:48 修改

阅读量472

点赞数 1

分类专栏： HTML、CSS 文章标签： css

于 2022-04-08 14:47:07 首次发布

本文链接：https://blog.csdn.net/YourLie_in_April/article/details/124040398

版权

HTML、CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

position: 定位属性。（属性值：static （默认值）没有定位、 relative: 相对定位、 absolute: 绝对定位、 fixed: 固定定位。）

position: relative; 相对定位（相对于元素本身的位置进行定位，可设置：top、left、right、bottom。可以理解为LOL的永恩或者说王者荣耀的元歌，原来的位置会被保留下来，灵魂去按照设置的属性值飘动。）

position: absolute; 绝对定位（绝对定位的基准是以它最近的一个“已经定位”的“祖先元素”为基准进行偏移{如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位}可设置：top、left、right、bottom。在使用绝对定位使元素位置发生偏移后，它原来的位置不会被保留下来。）

【子绝父相：在一般使用绝对定位时会使用相对定位，来帮助绝对定位的定位，即父元素设置相对定位position: relative;子元素设置position: absolute;来完成绝对定位。】

position: fixed; 固定定位（相对浏览器窗口来定位，即整个视口屏幕来定位，会随着滚动条的移动而移动，一般用于窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等。）

绝对定位与固定定位差别可以使用下面这段代码进行体验：

<!DOCTYPE html>
<html>
<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{
            height: 2000px;
        }
        div{
            width: 100px;
            line-height: 100px;
            text-align: center;
        }
        .jd{
            position:absolute;
            right: 100px;
            top: 100px;
            background: orange;
        }
        .gd{
            position: fixed;
            left: 100px;
            top: 300px;
            background: pink;
        }
    </style>
</head>
<body>
    <div class="jd">绝对定位</div>
    <div class="gd">固定定位</div>
</body>
</html>

小练习：

<!DOCTYPE html>
<html>
<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>商品列表</title>
    <link rel="stylesheet" href="./demo2.css">
</head>
<body>
    <div class="box">
        <div class="title">商品列表</div>
        <div>
            <ul class="nf">
                <li class="fl">
                    <img src="./素材/img/photo_01.jpg">
                    <p>韩版修身长袖T袖打底衫</p>
                    <p>一口价：49.00</p>
                </li>
                <li class="fl">
                    <img src="./素材/img/photo_02.jpg" >
                    <img src="./素材/img/xsq.png" class="xsq">
                    <p>2011新款T袖短袖</p>
                    <p>一口价：39.00</p>
                </li>
                <li class="fl">
                    <img src="./素材/img/photo_03.jpg">
                    <p>钉珠蝴蝶秋冬背心呢料裙</p>
                    <p>一口价：68.00</p>
                </li>
                <li class="fl">
                    <img src="./素材/img/photo_04.jpg">
                    <p>长袖连衣裙</p>
                    <p>一口价：79.00</p>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

样式：

*{padding: 0;margin: 0;}
li{list-style: none;}
.fl{
    float: left;
}
.nf::after{
    display: block;
    content: ' ';
    clear: both;
}
.box{
    margin: 0 auto;
    width: 600px;
}
.box .title{
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
}
.box li img{
    text-align: center;
    display: block;
}
.box li{
    width: 188px;
    height: 240px;
    border: 1px solid #ccc;
    position: relative;
    margin: 10px 5px;
}
.box li .xsq{
    position: absolute;
    top: 0;
    right: 0;
}
.box li p:nth-of-type(1){
    font-size: 14px;
    font-weight: 700;
    color: #6498BE;
    padding-left: 5px;
    margin-bottom: 6px;
}
.box li p:nth-of-type(2){
    font-size: 14px;
    padding-left: 5px;
    font-weight: 700;
}

总结：望各位大佬指正。

YourLie_in_April

关注

1
点赞
踩
0

收藏

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

position:定位属性。（属性值：static （默认值）没有定位、 relative: 相对定位、 absolute: 绝对定位、 fixed: 固定定位。）position: relative; 相对定位（相对于元素本身的位置进行定位，可设置：top、left、right、bottom。可以理解为LOL的永恩或者说王者荣耀的元歌，原来的位置会被保留下来，灵魂去按照设置的属性值飘动。）position: absolute;绝对定位（绝对定位的基准是以它最近的一个“已经定位...
复制链接

扫一扫