《HTML+CSS》视频13 定位、层级、透明、背景

最新推荐文章于 2024-08-09 20:45:54 发布

Han_python

最新推荐文章于 2024-08-09 20:45:54 发布

阅读量340

点赞数

分类专栏： HTML+CSS 文章标签： html css

本文链接：https://blog.youkuaiyun.com/Han_python/article/details/111714911

版权

HTML+CSS 专栏收录该内容

14 篇文章

订阅专栏

定位：将指定元素摆放到页面的任意位置。

通过position属性来设置定位，可选值：

static 默认值，元素不开启定位
relative 开启相对定位
absolute 开启绝对定位
fixed 开启固定定位（绝对定位的一种）

当开启了元素的定位（position不是默认值）时，可以通过left、right、top和bottom四个属性来设置元素定位位置的偏移量。

position:relative;
left:100px;

相对定位

相对于其原来位置进行偏移
不会脱离文档流
会使元素提升一个层级
不会改变元素的性质，块还是块，内联还是内联

绝对定位

开启绝对定位会使元素脱离文档流。
如果不设置偏移值，和相对定位一样，保持原来位置。
绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的，如果所有祖先元素都没有开启定位，就相对于浏览器窗口进行定位。
绝对定位会使元素提升一个层级
因为脱离了文档流，所以块元素宽高都被内容撑开，内联元素宽高值会起作用，变成块元素。

固定定位

固定定位也是一种绝对定位，它的大部分特点和绝对定位一样。不同的是，它永远都会相对于浏览器窗口进行定位。

固定定位会固定在浏览器窗口的某个位置，不会随滚动条滚动。

IE6不支持固定定位。

z-index
如果定位元素层级相同，则结构上处于下方的元素会盖住上方的元素。通过z-index属性可以设置元素的层级。可以为z-index指定一位正整数作为值，该值将会作为当前元素的层级，层级越高越优先显示。

对于没有开启定位的元素，不能使用z-index

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

opacity可以设置透明的背景。

给opacity设置一个0-1之间的值，可以设置透明程度。比如，如果需要设置半透明，可以：

opacity：0.5;

opacity这个属性在IE8以下浏览器不支持，需要使用如下属性代替：

filter:alpha(opacity=50);

其中opacity需要0-100之间的值。

背景

使用background-image来设置图片背景，语法：

background-image:url(路径)

可以为元素同时设置background-color和background-image，则背景颜色将会作为背景图片的底色。

background-repeat可有设置背景图片的重复样式，可选值：

repeat 默认值，会双方向重复，平铺图片。
no-repeat 不重复，有多大就显示多大
repeat-x 横向重复
repeat-y 纵向重复

导航条的渐变，可以截一个像素的竖直图片，设置为背景图片，然后水平方向上平铺。

background-position可以定位背景图片，该属性可以使用top right left bottom center 中的两个值来指定一个背景图片的位置。如果只写一个值，则第二个值默认是center

0% 0%，默认值
top left 左上
bottom center 下中
xpos ypos

xpos ypos的单位是像素，比较常用，

background-position：-10px 50px;

background-attachment用来设置背景图片是否随着页面的其余部分滚动。可选值：

scroll 默认值，背景图片会随着窗口滚动
fixed 固定，背景图片不随页面滚动，固定在某一位置

当可选值设置为fixed的时候，背景图片的定位永远相对于浏览器的窗口。

不随窗口滚动的图片，一般都是设置给body，而不设置给其他元素。

总结

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				height: 312.5rem;
				background-color: #bfa;
				background-image: url(./img/css-sprite.png);
				background-repeat: no-repeat;
				/*设置背景图片位置*/
				background-position: center center;
				/*设置背景图片位置不随滚动条滚动*/
				background-attachment: fixed;
			}
		</style>
	</head>
	<body>
		
	</body>
</html>

上面的那么多属性设置，可以使用一个简写属性background，可以使用一个属性，同时设置所有背景样式，并且没有顺序要求。

body{
	background: #bfa url(img/css-sprite.png) no-repeat center center fixed;
}