CSS 定位 | background 属性

文档流

文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。

关于定位

我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下：

• relative 生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。
• absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素（一般设置为相对的）来进行定位，如果找不到，则相对于body元素进行定位。
  先找到上一个父级元素进行定位，如果父级元素如果没有position（设置绝对或者相对都可以），那么就相对于再上一个层级定位。比如body之类的都是有默认定位的。
  ！！相对位置可以为负值。
• fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
• static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性。

定位元素层级
定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级。后面跟的是一个数字，数字越大层级越大。

小技巧

设定圆角和圆

1. 层级样式：设置圆角和圆，如果圆的半径为宽度的一半，那么就会变成一个圆。

/* 设置元素圆角,将元素四个角设置4px半径的圆角 */
border-radius:4px;

固定元素居中

2. 让固定元素居中，这样就是浮动在上面的弹窗。
   让顶条凑够页面50%开始显示，然后再往回走长条宽度的一半。

/* 设定固定定位元素 自动转换为固定块元素*/
			position: fixed;
			width: 960px;
			top: 0;
/* 定位元素用margin: auto;是不起作用的 */
			left: 50%;
			margin-left: -480px;

设置透明度

3. 制作弹窗技巧:
   写弹窗，放置在页面中间，设置层级最顶。
   写背景，设置全黑，设定透明度，设置层级为弹窗-1。

		.popup{
			width: 500px;
			height: 300px;
			border: 1px solid black;
			background-color: white;
			color: white;
			position: fixed;
			left: 50%;
			margin-left: -251px;
			top: 50%;
			margin-top: -151px;
			z-index: 9999;
			
		}
		.popup h2{
			background-color: gold;
			margin: 10px;
			height: 40px;

		}
		/* 制作暗下去的效果 */
		.mask{
			background-color: black;
			width: 100%;
			height: 100%;
			position:fixed;
			left: 0;
			top: 0;
			opacity: 0.1;
			z-index: 9998;
		}

</div>
	<div class="popup">
		<h2>弹框标题</h2>
	</div>
	<div class="mask"></div>

background 属性

• background-color 设置背景颜色
• background-image 设置背景图片地址

 background-image: url(../../images/1.jpg);

• background-repeat设置背景图片如何重复平铺

/* repeat-x:平铺x轴方向;
			repeat-y：平铺y方向；
			no-repeat：不平铺;
			repeat:缺省值，平铺所有的; */
			background-repeat: no-repeat; 

• background-position 设置背景图片的位置

background-position: right center;
			background-position: 10px 10px;

• background-attachment设置背景图片是固定还是随着页面滚动条滚动
  这个属性用的不是很多

可以合并来写:
实际应用中，我们可以用background属性将上面所有的设置项放在一起，而且也建议这么做，这样做性能更高，而且兼容性更好，比如：“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，这里面的“#00ff00”是设置background-color；“url(bgimage.gif)”是设置background-image；“no-repeat”是设置background-repeat；“left center”是设置background-position；“fixed”是设置background-attachment，各个设置项用空格隔开，有的设置项不写也是可以的，它会使用默认值。