CSS定位布局

yooo*

已于 2022-07-27 17:08:04 修改

阅读量641

点赞数

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

于 2022-01-23 17:28:27 首次发布

本文链接：https://blog.csdn.net/Y_ooo/article/details/122654115

版权

CSS 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

这篇博客详细介绍了CSS定位布局，包括相对定位、绝对定位及其对照和多级定位、通过定位设置尺寸、元素居中方法、定位叠加原理、粘性定位的上下级关系以及固定定位的应用。内容涵盖各种定位方式的特点和使用场景。

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

文章目录

定位的基本思想很简单，它允许你 定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

在这里插入图片描述

1.相对定位

position: relative

相对定位：从当前位置添加定位（当前位置是保留的）

* {
    padding: 0;
    margin: 0;
}

p {
    border: solid 5px blueviolet;
    width: 400px;
    height: 400px;
    padding: 30px;
}

p img {
    width: 30px;
    height: 30px;
    position: relative;
    /* 正数向里收，负数向外扩 */
    top: 20px;
    right: 30px;
}

<body>
    <p>
        <img src="head.png" alt="">
        距离2022央视虎年春晚还有11天，作为独家互动合作伙伴的京东，早已进入紧锣密鼓的作战状态。第一次上春晚战场，京东十分重视。据Tech星球报道，这次项目由京东集团总裁徐雷整体负责，京东零售CEO辛利军牵头，内部特意成立8个项目小组，做好相关服务工作。1月19日，在京东零售表彰大会上，辛利军专门提到这场合作，称这是“对京东服务用户的能力以及长期坚定打造数智化社会供应链等核心能力的认可”，他表示京东零售会努力做好消费者的代言人、品牌商家和中小企业的友好合作伙伴、坚定的乡村振兴践行者等几个角色。
    </p>
</body>

在这里插入图片描述

2.绝对定位

position: absolute

绝对位置：当前位置丢失，参照整个页面

（1）对照

如果父元素也有定位属性，则子元素参照父元素。

* {
    padding: 0;
    margin: 0;
}

p {
    border: solid 5px blueviolet;
    width: 400px;
    height: 400px;
    padding: 30px;
    margin-top: 100px;
    margin-left: 100px;
    /* 如果父元素也有定位属性，则子元素参照父元素 */
    position: relative;
}

p img {
    width: 30px;
    height: 30px;
    /* 绝对位置：当前位置丢失 */
    position: absolute;
    right: 0px;
    top: 0px;
}

在这里插入图片描述

（2）多级定位

子元素参考于离其最近的有定位属性的父元素。

article {
    border: solid 8px blueviolet;
    width: 400px;
    height: 400px;
    margin: 100px;
    position: relative;
}

section {
    position: relative;
    background: #ddd;
    width: 100%;
    height: 100%;
    left: 100px;
}

div {
    background: red;
    width: 200px;
    height: 200px;
    /* 参考于离其最近的有定位属性的父元素 */
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -100px;
    margin-left: -100px;
}

<body>
    <article>
        <section>
            <div></div>
        </section>
    </article>
</body>

在这里插入图片描述

3.通过定位设置尺寸

如果元素没有设置宽高，则把边界移动到定位位置。

article {
    border: solid 8px blueviolet;
    width: 400px;
    height: 400px;
    margin: 100px;
    position: relative;
    overflow: hidden;
}

div {
    background: red;
    /* width: 200px;
    height: 200px; */
    position: absolute;
    /* 如果没有设置宽高，则把边界移动到定位位置 */
    top: 100px;
    left: 300px;
    right: -100px;
    bottom: 100px;
    border-radius: 50%;
}

<article>
    <div></div>
</article>

在这里插入图片描述

4.通过定位元素居中

（1）计算：元素宽高相减/2

article {
    border: solid 8px blueviolet;
    width: 400px;
    height: 400px;
    margin: 100px;
    position: relative;
}

div {
    background: red;
    width: 200px;
    height: 200px;
    position: absolute;
    /* (400-200)/2 */
    left: 100px;
    top: 100px;
}

（2）50%

article {
    border: solid 8px blueviolet;
    width: 400px;
    height: 400px;
    margin: 100px;
    position: relative;
}

div {
    background: red;
    width: 200px;
    height: 200px;
    position: absolute;
    /* 左上顶点位于中点 */
    left: 50%;
    top: 50%;
    /* 200/2 */
    margin-top: -100px;
    margin-left: -100px;
}

5.定位叠加

z-index: 数值

数值越大，定位层级优先级越高

* {
    padding: 0;
    margin: 0;
}

body {
    padding: 100px;
}

ul {
    list-style: none;
}

ul li {
    width: 300px;
    height: 185px;
    border: solid 5px blueviolet;
    position: relative;
    overflow: hidden;
}

ul li img {
    width: 100%;
    position: absolute;
    z-index: 2;
}

ul li:hover img {
    z-index: -2;
}

ul li>span {
    position: absolute;
    width: 30px;
    height: 30px;
    background: red;
    border-radius: 50%;
    text-align: center;
    font-size: 13px;
    color: white;
    line-height: 2em;
    left: 10px;
    top: 10px;
    box-shadow: 0 0 10px #333;
    z-index: 3;
}

div {
    height: 100%;
    width: 100%;
    background: #333;
    position: relative;
    z-index: 1;
}

div h2 {
    text-align: center;
    line-height: 7em;
    color: white;
}

<body>
    <ul>
        <li>
            <span>热</span>
            <img src="head.png" alt="">
            <div>
                <h2>定位操作布局</h2>
            </div>
        </li>
    </ul>
</body>

在这里插入图片描述

案例：购物车

* {
    padding: 0;
    margin: 0;
}

body {
    padding-left: 200px;
    padding-top: 200px;
}

article {
    width: 150px;
    position: relative;
}


article div {
    height: 50px;
    border: solid 1px #ddd;
    text-align: center;
    line-height: 3em;
}

article:hover div:nth-of-type(1) {
    border-bottom: none;
    border-color: blueviolet;
}

article:hover div:nth-of-type(2) {
    display: block;
    border-color: blueviolet;
}

article div:nth-of-type(1) {
    background: #fff;
    position: relative;
    z-index: 2;
}

article div:nth-of-type(2) {
    width: 300px;
    position: absolute;
    right: 0;
    top: 50px;
    display: none;
}

<body>
    <article>
        <div>我的购物车</div>
        <div>购物车内暂无商品</div>
    </article>
</body>

在这里插入图片描述

6.粘性定位

元素有吸附住的效果。

position: sticky

（1）不同级

当元素不同级时，后一个会顶掉前一个。

* {
    padding: 0;
    margin: 0;
}

body {
    margin-top: 100px;
    margin-left: 100px;
}

article {
    width: 600px;
    height: 350px;
    border: solid 5px blueviolet;
    overflow: scroll;
}

article section h2 {
    background: blueviolet;
    color: white;
    /* 给h2标题添加粘性定位 */
    position: sticky;
    /* 定位到顶部 */
    top: 0;
}

article section:nth-of-type(even) h2 {
    background: #333;
}

<article>
    <section>
        <h2>Yooo.com</h2>
        <p>...</p>
    </section>
    <section>
        <h2>Yooo.com</h2>
        <p>...</p>
    </section>
    <section>
        <h2>Yooo.com</h2>
        <p>...</p>
    </section>
</article>