没有合适的资源?快使用搜索试试~ 我知道了~
本文详细讲解了 CSS 中多种元素定位的方法及其应用场景,具体涉及静态定位(static),相对定位(relative),绝对定位(absolute),固定定位(fixed)以及粘性定位(sticky),同时解释了每种定位方式的工作机制和相关属性(top, bottom, left, right等),特别探讨了 '子绝父相' 布局技巧,还介绍了如何利用 z-index 控制重叠元素的层级。 适用于有一定前端经验的开发者、Web设计师和技术从业者。 应用场景及目的:①深入理解不同定位模式下的页面布局特点与操作规范;②灵活掌握多种复杂布局的设计思路和技术细节;③熟悉并解决常见网页布局问题。
资源推荐
资源详情
资源评论
CSS元素定位
王红元 coderwhy
目录
content
粘性定位
5
标准流布局
1
相对定位
2
固定定位
3
绝对定位
4
z-index
6
coderwhy
◼ 默认情况下,元素都是按照normal flow(标准流、常规流、正常流、文档流【document flow】)进行排布
从左到右、从上到下按顺序摆放好
默认情况下,互相之间不存在层叠现象
标准流(Normal Flow)
inline-block
block
inline
block
inline
inline-block
block
inline
inline
inlineinline-block
</body>
<span>span1</span>
<img src="images/cube.jpg" alt="">
<span style="display: inline-block">span2</span>
<div>div</div>
<p>p</p>
<span style="display: inline-block">span</span>
<body>
<strong>strong</strong>
<h1>h1</h1>
<span>span3</span>
<span>span5</span>
<span style="display: inline-block">span4</span>
coderwhy
◼ 在标准流中,可以使用margin、padding对元素进行定位
其中margin还可以设置负数
◼ 比较明显的缺点是
设置一个元素的margin或者padding,通常会影响到标准流中其他元素的定位效果
不便于实现元素层叠的效果
◼ 如果我们希望一个元素可以跳出标准量,单独的对某个元素进行定位呢?
我们可以通过position属性来进行设置;
margin-padding位置调整
剩余18页未读,继续阅读
资源评论
么么——
- 粉丝: 3
- 资源: 189
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功