CSS 定位 (Positioning) 实例

最新推荐文章于 2023-07-22 14:52:35 发布

weixin_33920401

最新推荐文章于 2023-07-22 14:52:35 发布

阅读量135

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Nyan-Workflow-FC/p/6602205.html

本文介绍了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