css基础学习-----绝对定位

最新推荐文章于 2022-06-16 10:12:15 发布

ccd756601501

最新推荐文章于 2022-06-16 10:12:15 发布

阅读量317

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/ccd756601501/article/details/54091107

版权

css 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

下面的示例简单演示了绝对定位的效果。

<html>
<head>
	<style>
		div.child{
			width:80px;
			height:30px;
			border:1px solid black;
			background-color:silver;
		}
		div.parent{
			width:200px;
			height:150px;
			border:1px solid gray;
		}
	</style>
</head>
<body>
	<div class="parent">
		<div class="child">1</div>
		<div class="child" style="position:absolute;top:15px;left:30px;">2</div>
	</div>
</body>
</html>

堆叠顺序：一旦修改了元素的定位方式，则元素可能会发生堆叠。

z-index:value 值越大，表示堆叠顺序越高，离用户更近，元素的显示会接近页面表面。

下面的示例简单演示了堆叠顺序的效果。

<html>
<head>
	<style>
		div{
			z-index:100;
			width:200px;
			height:100px;
			border:1px solid gray;
			background-color:white;
		}
		div.first{
			position:relative;
			top:-10px;
			left:30px;
			z-index:-1;
			background-color:silver;
		}
		div.second{
			position:absolute;
			top:60px;
			left:150px;
			z-index:2;
			background-color:silver;
		}
	</style>
</head>
<body>
	<div>div</div>
	<div class="first">z-index:2</div>
	<div class="second">z-index:-1</div>
</body>
</html>

ccd756601501

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css基础学习-----绝对定位

显示显示方式：块级元素、内联元素（行内元素）display:none|block|inline 元素内容不再显示|行内元素表现得像块级元素|块级元素表现得像内联元素光标：默认情况下，光标会根据用户的操作发生改变cursor:(default)|pointer|crosshair|text|wait|help绝对定位：将元素的内容从普通流中完全移除，不占据空间，
复制链接

扫一扫