CSS-定位

Mandaner

已于 2022-03-07 12:48:39 修改

阅读量210

点赞数

文章标签： css

于 2022-03-07 11:12:14 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/qq_40560220/article/details/123320224

版权

本文深入探讨了CSS中的定位技术，包括网页常见布局方式和定位的常见应用场景。详细阐述了静态定位、相对定位、绝对定位以及固定定位的概念和使用步骤。特别关注了子绝父相的布局策略，提供了水平居中和水平垂直居中的解决方案。同时，提到了元素层级问题和如何调整定位元素的层级，最后强调了为整个网页设置背景颜色的方法。

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

1 定位介绍

1.1 网页常见布局方式：

在这里插入图片描述

1.2 定位的常见应用场景

在这里插入图片描述

2 定位基本使用

使用定位的步骤

3 定位分类

3.1 静态定位

在这里插入图片描述

3.2 相对定位

在这里插入图片描述

3.3 绝对定位

在这里插入图片描述

3.3 子绝父相

在这里插入图片描述

3.3.1 特殊场景：

在这里插入图片描述

3.3.2 子绝父相水平居中案例-解决办法

在这里插入图片描述

3.3.3 子绝父相水平、垂直都居中的解决办法

在这里插入图片描述

3.4 固定定位

在这里插入图片描述
注意点:给整个网页设置背景颜色：在body中添加backgroundcolor即可。

4 元素层级问题

5 更改定位元素的层级

在这里插入图片描述

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。