06_02.绝对定位absolute、层级

最新推荐文章于 2024-08-11 18:04:03 发布

大史叔叔

最新推荐文章于 2024-08-11 18:04:03 发布

阅读量4k

点赞数

分类专栏： XHTML+CSS

本文链接：https://blog.csdn.net/cigarangle/article/details/38744361

版权

XHTML+CSS 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		/*
		1.元素设置position:absolute后，元素脱离文档流
		2.元素设置position:absolute后，元素具有float的特性
		3.元素设置position:absolute后，元素以最近的已设置position属性的父级元素为基准进行偏移；如没有符合条件的父级元素，则以默认“可视”文档为基准→→<span style="font-family: Arial, Helvetica, sans-serif;">不跟随滚动条移动。</span>
		4.层级用z-index:[number]设置，数字越大，优先级越高。同时设置position的元素，后者比前者的优先级高、设置层级的元素比没设置层级的元素优先级高
		*/
		.wrap{height: 300px;background: gray;position: relative;}
		.box1{width: 300px;height: 100px;background: red;position: absolute;bottom: 0;right: 0;z-index: 1;/*z-index: 4;*/}
		span.box2{width: 400px;height: 100px;background: green;position: absolute;bottom: 30px;right: 10px;z-index: 2;}
		.box3{width: 200px;height: 200px;background: blue;}
		.box4{width: 400px;height: 50px;background: yellow;position: relative;left:800px;top: 40px;z-index:1 }
	</style>
</head>

<body>
	<div class="wrap">
		<div class="box1">box1</div>
		<span class="box2">span.box2</span>
		<div class="box3">box3</div>
		<div class="box4">box4</div>
	</div>
</body>
</html>