CSS定位&元素层级&设置背景

最新推荐文章于 2025-01-12 17:17:01 发布

中南大学苹果实验室

最新推荐文章于 2025-01-12 17:17:01 发布

阅读量2.4k

点赞数 10

分类专栏： Web学习记录文章标签： css 定位

本文链接：https://blog.csdn.net/cyl_csdn_1/article/details/108994056

版权

Web学习记录专栏收录该内容

18 篇文章

订阅专栏

日期：2020-10-10

作者：19届WY

标签：CSS中几种定位，元素的层级，设置背景

一、定位

定位：
- 定位指的是将指定的元素摆放到页面的任意位置
- 通过定位可以任意地摆放元素
- 通过position属性来设置元素的定位
- 可选值：
  static，默认值，元素没有开启定位
  relative：开启元素的相对定位
  absolute：开启元素的绝对定位
  fixed，开启元素的固定定位（也是绝对定位的一种）
当开启了元素的定位（position属性值是一个非static的值）时，
- 可以通过left，right，top，bottom四个属性来设置元素的偏移量
  - left：元素相对与其定位位置的左侧偏移量
  - right：元素相对与其定位位置的右侧偏移量
  - top：元素相对与其定位位置的上边的偏移量
  - bottom：元素相对与其定位位置的下边的偏移量

二、相对定位

当元素的position属性设置为relative时，则开启了元素的相对定位
- 1、当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
- 2、相对定位是相对于元素在文档流中原来的位置进行定位
- 3、相对定位的元素不会脱离文档流
- 4、相对定位会使元素提升一个层级
- 5、相对定位不会改变元素的性质，块还是块，内联还是内联
通常偏移量只需要使用两个就可以对一个元素进行定位，
- 一般选择水平方向的一个偏移量和一个垂直方向的偏移量来为一个元素进行定位

.box2{
	width:100px;
	height:100px;
	background-color:yellow;
	position: relative;
	left:100px;
	top:100px;
}
.box4{
	width:300px;
	height:300px;
	background-color: orange;
	/*开启box4的相对定位*/
	position:relative;
}

三、绝对定位

当position属性值设置为absolute时，则开启了元素的绝对定位
绝对定位：
- 1、开启绝对定位，会使元素脱离文档流
- 2、开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化
- 3、绝对位置是相对于离他最近的开启了定位的祖先元素进行定位的(一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位)
- 如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位
- 4、绝对定位会使元素提升一个层级
- 5、绝对定位会改变元素的性质：
  - 内联元素变成块元素，
  - 块元素的宽度和高度默认都被内容撑开

.box2{
	width:100px;
	height:100px;
	background-color: yellow;
	position:absolute;
	left:0px;
	top:0px;
}
.s1{
	width:100px;
	height:100px;
	background-color:yellow ;
	/*开启绝对定位*/
	position: absolute;
}

四、固定定位

当元素的position属性设置fixed时，则开启了元素的固定定位
固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样
不同的是：
- 固定定位永远都会相对于浏览器窗口进行定位
- 固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动
- IE6不支持固定定位

.box2{
	width:100px;
	height:100px;
	background-color: yellow;
	position: fixed;
	left:0px;
	top:0px;
}

五、元素的层级——z-index

如果定位元素的层级一样，则下边的元素会盖住上边的
通过z-index属性可以用来设置元素的层级
可以为z-index指定一个正整数作为值，该值将作为当前元素的层级
层级越高，越优先显示

.box2{
	width:100px;
	height:100px;
	background-color: yellow;
	/*开启绝对定位*/
	position: absolute;
	/*设置偏移量*/
	top:100px;
	left:100px;
	z-index:1;
}
.box3{
	width:100px;
	height:100px;
	background-color: yellowgreen;
	/*开启相对定位*/
	/*position: relative;*/
	position:absolute;
	top:200px;
	left:200px;
	z-index:300;
}

父元素的层级再高，也不会盖过子元素

<style type="text/css">
	.box4{
			width:200px;
			height:200px;
			background-color:orange;
			/*开启相对定位*/
			position: relative;
			z-index:20;
		}
	.box5{
			width:100px;
			height:100px;
			background-color:skyblue;
			/*开启绝对定位*/
			position:absolute;
			z-index:10;
			}
		</style>
<body>
		<div class="box4">
			<div class="box5"></div>
		</div>
	</body>

呈现结果：
4是橙色没有盖住5的蓝色
元素层级

六、设置背景

1、设置元素的透明背景——opacity

opacity可以用来设置元素背景的透明
它需要一个0-1之间的值
- 0表示完全透明
- 1表示完全不透明
opacity属性在IE8及以下的浏览器中不支持
IE8及以下的浏览器需要使用如下属性代替
- alpha(opacity=透明度)
- 透明度，需要一个0-100之间的值
- 0表示完全透明
- 100表示完全不透明
- 50半透明
这种方式支持IE6，但是这种效果在IE Tester中无法测试

.box3{
		width:100px;
		height:100px;
		background-color: yellowgreen;
		/*开启相对定位*/
		/*position: relative;*/
		position:absolute;
		top:200px;
		left:200px;
		opacity: 0.5;
		z-index:300;
		filter: alpha(opacity=50);
}

2、背景图片

（1）使用background-image来设置背景图片

语法： background-image:url(相对路径);
- 如果背景图片大于元素，默认显示图片的左上角
- 如果背景图片和元素一样大，则会将背景图片全部显示
- 如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素
可以同时为一个元素指定背景颜色和背景图片，
- 这样背景颜色会作为背景图片的底色
- 一般情况下设置背景图片时都会指定一个背景颜色

.box1{
	width:500px;
	height:500px;
	margin:100px auto;
	/*设置背景样式*/
	background-color: #bfa;
    background-image:url(../image/background.png);
}

这里image和该html文件在不同的文件夹中，注意相对路径的写法
在这里插入图片描述

（2）background-repeat用于设置背景图片的重复方式

可选值：
- repeat，默认值，背景图片会双方向重复（平铺）
- no-repeat,背景图片不会重复，有多大就显示多大
- repeat-x,背景图片沿水平方向重复
- repeat-y,背景图片沿垂直方向重复

.box1{
	width:500px;
	height:500px;
	margin:100px auto;
	/*设置背景样式*/
	background-color: #bfa;
	background-image:url(../image/background.png);
	background-repeat: no-repeat;
}

（3）通过background-position可以调整背景图片在元素中的位置

背景图片默认是贴着元素的左上角显示
通过background-position可以调整背景图片在元素中的位置
可选值：
- 该属性可以使用top right left bottom center中的两个值，来指定一个背景图片的位置
  - top left 左上
  - bottom right 右下
- 如果只给出一个值，则第二个值默认是center
  - 也可以直接指定两个偏移量
  - 第一个值是水平偏移量
```
如果指定的是一个正值，则图片会向右移动指定的像素
 如果指定的是一个负值，则图片会向左移动指定的像素
```
  -第二个是垂直偏移量

.box1{
	 width:500px;
	 height:500px;
	 margin:0 auto;
	 /*设置一个背景颜色*/
	 background-color:#bfa;
	 /*设置一个背景图片*/
	 background-image:url(../image/background.png);
	 /*设置一个图片不重复*/
	 background-repeat: no-repeat;
	 /*background-position: center center;*/
	 background-position:100px 0px;
}

（4）background-attachment用来设置背景图片是否随页面一起滚动

可选值：
- scroll,默认值，背景图片随着窗口滚动
- fixed，背景图片会固定在某一位置，不随页面滚动
不随窗口滚动的图片，我们一般设置给body，而不设置给其他元素

body{
	 background-image:url(../image/background.png);
	 background-repeat: no-repeat;
	 background-attachment:fixed;
}

当背景图片的background-attachment设置为fixed时，
背景图片的定位永远相对于浏览器的窗口

body{
	background-image:url(../image/background.png);
	background-repeat: no-repeat;
	background-position:center;
	background-attachment:fixed;
}