CSS定位网页元素（绝对定位、相对定位、固定定位、z-index、透明度）

最新推荐文章于 2024-09-05 08:27:32 发布

Marvellous丶

最新推荐文章于 2024-09-05 08:27:32 发布

阅读量1.8k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/baolingye/article/details/92841783

版权

前端专栏收录该内容

12 篇文章 5 订阅

订阅专栏

CSS定位网页元素

一、定位

position属性

static ：默认值，没有定位
relative：相对定位
absolute：绝对定位
fixed：固定定位

二、相对定位

相对定位的特性
- 相对于自己的初始位置来定位
- 元素位置发生偏移后，它原来的位置会被保留下来
- 层级提高，可以把标准文档流中的元素及浮动元素盖在下边
相对定位的使用场景

相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Title</title> 
<style>
h2.pos_left
{
	position:relative;
	left:-20px;
}

h2.pos_right
{
	position:relative;
	left:20px;
}
</style>
</head>

<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>

</html>

运行结果：
在这里插入图片描述

三、绝对定位

绝对定位的特性
- 绝对定位是相对于它的定位父级的位置来定位，如果没有设置定位父级，则相对浏览器窗口来定位
- 元素位置发生偏移后，原来的位置不会被保留
- 层级提高，可以把标准文档流中的元素及浮动元素盖在下边
- 设置绝对定位的元素脱离文档流
绝对定位的使用场景

一般情况下，绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Title</title> 
<style>
h2
{
	position:absolute;
	left:100px;
	top:150px;
}
</style>
</head>

<body>
<h2>这是一个绝对定位了的标题</h2>
<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p>
</body>

</html>

运行结果：
在这里插入图片描述

四、固定定位

固定定位的特性
- 相对浏览器窗口来定位
- 偏移量不会随滚动条的移动而移动
固定定位的使用场景

一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Title</title> 
<style>
p.pos_fixed
{
	position:fixed;
	top:30px;
	right:5px;
}
</style>
</head>
<body>

<p class="pos_fixed">Some more text</p>
<p><b>注意:</b> IE7 和 IE8 支持只有一个 !DOCTYPE 指定固定值.</p>
<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>
</body>
</html>

运行结果：
在这里插入图片描述

五、z-index属性

用于调整元素定位时重叠层的上下位置

z-index属性值：整数，默认值为0
设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系
z-index值大的层位于其值小的层上方

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Title</title> 
<style>
img
{
	position:absolute;
	left:0px;
	top:0px;
	z-index:-1;
}
</style>
</head>

<body>
<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140" />
<p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>
</body>
</html>

运行结果：
在这里插入图片描述

六、网页元素透明度

opacity:x x值为0~1，值越小越透明 opacity:0.4;
filter:alpha(opacity=x) x值为0~100，值越小越透明 filter:alpha(opacity=40);

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
background-color:red;
opacity:0.5;
filter:Alpha(opacity=50); /* IE8 and earlier */
}
</style>
</head>
<body>

<div>This element's opacity is 0.5! Note that both the text and the background-color are affected by the opacity level!</div>

</body>
</html>

运行结果：
在这里插入图片描述