css 四种定位方式

/*通配符选择器*/
*{
	margin:0px;
	padding:0px;	
}

/*div的选择器*/
.div1{
	border:1px solid red;
	background:silver;
	width:60px;
	height:30px;
	float:left;
	margin-left:5px;
}

.div2{
	position:relative;
	left:10px;
	top:10px;
	width:100px;
	height:80px;
	background:pink;
	float:left;
	margin-left:5px;	
}
/*相对定位,他原来的空间任然保留*/
#spe{
	position:relative;
	top:40px;
	left:20px;	
}

/*绝对定位:元素框从文档流里完全删除
对该元素最近的那个脱离了标准流的元素定位*/
#spe2{
	position:absolute;
	top:40px;
	left:20px;	
}

/*固定定位,只想对于视图的左上角定位*/
#spe{
	position:fixed;
	top:40px;
	left:20px;	
}

/*静态定位是默认的static left、top此时没有效果
靠margin来移动位置*/
/*z-index用于设置对象(div)显示时候,层叠的属性,
z-index值越小,则越在下层显示*/
<html>
<head>
	<link rel="stylesheet" type="text/css" href="position.css"/>
</head>
<body>
	<div class="div1">内容1</div>
	<div class="div1">内容3</div>
	<div class="div1">内容4</div>
	<div class="div2">
		<div class="div1" id="spe2">内容2</div>
	</div>
</body>	
</html>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蟹道人

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值