css浮动和层级

最新推荐文章于 2024-07-25 09:25:29 发布

Machoul

最新推荐文章于 2024-07-25 09:25:29 发布

阅读量743

点赞数

分类专栏： css 文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_34932086/article/details/125498685

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Css浮动和层级

css浮动

float:使元素浮动，从而脱离文档流

none，默认值，元素默认在文档流中排列
left，元素会立即脱离文档流，向页面的左侧浮动
right，元素会立即脱离文档流，向页面的右侧浮动
特点:
- 当为一个元素设置浮动以后（float属性是一个非none的值），元素会立即脱离文档流，元素脱离文档流以后，它下边的元素会立即向上移动
- 元素浮动以后，会尽量向页面的左上或这是右上漂浮,直到遇到父元素的边框或者其他的浮动元素
- 如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素,
- 浮动的元素不会超过他上边的兄弟元素，最多最多一边齐
- 浮动的元素不会盖住文字,文字会自动环绕在浮动元素的周围,所以我们可以痛过浮动来设置文字环绕图片的效果
- 内联元素脱离文档流之后会变成块元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
		
			*{
				margin: 0;
				padding: 0;
			}
			.box1{
				width: 100px;
				height: 100px;
				background-color: #bfa;
				/*box1向左浮动*/
				float: right;
			}
			.box2{
				width: 100px;
				height: 100px;
				background-color: blue;
				/* box1向左浮动*/
				float: right; 
			}
			.p1{
				background-color: yellow;
			}
			
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<p class="p1">
			在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。
这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。
		</p>
        <div class="box2"></div>
	</body>
</html>

层级和opacity

定位元素 > 浮动元素 > 文档流中的元素
当元素开启了定位以后，可以通过z-index来设置元素的层级,z-index值越高元素越优先显示,如果z-index值一样，或者都没有z-index则优先显示下边的元素,父元素永远不会盖住子元素

opacity:设置元素的透明.他需要一个0-1之间的值

0表示完全透明
1表示完全不透明
0.5表示半透明
opacity属性在IE8及以下的浏览器中不支持,IE8及以下的浏览器需要使用如下属性代替
- alpha(opacity=透明度):透明度需要一个0-100之间的值,0表示完全透明,100表示完全不透明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			
			.box1{
				width: 200px;
				height: 200px;
				background-color: red;
				position: relative;
				
				z-index: 28;
				
				opacity: 0.5;
				filter: alpha(opacity=50);
			}
			.box2{
				width: 200px;
				height: 200px;
				background-color: yellow;
				/*开启绝对定位*/
				position: absolute;
				/*设置偏移量*/				
				top: 100px;
				left: 100px;
				/*
				 * 如果定位元素的层级是一样，则下边的元素会盖住上边的
				 * 通过z-index属性可以用来设置元素的层级
				 * 可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级
				 * 	层级越高，越优先显示
				 * 
				 * 对于没有开启定位的元素不能使用z-index
				 */
				z-index: 25;
				
				opacity: 0.5;
				filter: alpha(opacity=50);
				
			}
			.box3{
				width: 200px;
				height: 200px;
				background-color: yellowgreen;
				/*position: relative;
				z-index: 3;*/
				position: absolute;
				top: 200px;
				left: 200px;
				z-index: 20;
				
			
				opacity: 0.5;
			
				filter: alpha(opacity=50);
			}
			
			.box4{
				width: 200px;
				height: 200px;
				background-color: orange;
				/*开启相对定位*/
				position: relative;
				/*
				 * 父元素的层级再高，也不会盖住子元素
				 */
				z-index: 20;
				
				top: 500px;
			}
			
			.box5{
				width: 100px;
				height: 100px;
				background-color: skyblue;
				/*开启绝对定位*/
				position: absolute;
				z-index: 10;
			}
			
		</style>
		
	</head>
	<body style="height: 5000px;">
		
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
		<div class="box4">
			<div class="box5"></div>
		</div>
	</body>
</html>