CSS 定位 (Positioning) 实例

本文介绍了CSS中的多种定位方式,包括相对定位、绝对定位、固定定位等,并详细讲解了每种定位方式的具体用法及应用场景。此外,还探讨了如何通过设置溢出属性来处理元素内容超出规定区域的问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、相对定位,相对于一个元素的正常位置来对其定位

position:relative;
left:-20px

2、使用绝对值来对元素进行定位

通过绝对定位,元素可以放置到页面上的任何位置。下面距离页面左侧 100px,距离页面顶部 150px。

position:absolute;
left:100px;
top:150px

3、固定定位

相对于浏览器窗口来对元素进行定位

position:fixed;
left:5px;
top:5px;

position:fixed;
top:30px;
right:5px;

4、设置元素的形状。此元素被剪裁到这个形状内,并显示出来

img 
{
position:absolute;
clip:rect(0px 500px 200px 0px)
}

5、当元素内容太大而超出规定区域时,如何设置溢出属性来规定相应的动作

background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll

overflow: hidden
overflow: auto

6、文本中垂直排列图象

vertical-align:text-top
vertical-align:text-bottom

7、Z-index可被用于将在一个元素放置于另一元素之后

position:absolute;
left:0px;
top:0px;
z-index:-1

默认的 z-index 是 0。负数放在后面,相当于图标背景

8、设置图像的上边缘

position:absolute;
top:0px;
z-index:-1
top:5%
bottom:0px
left:100px
right:20%

 

转载于:https://www.cnblogs.com/Nyan-Workflow-FC/p/6602205.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值