您的位置：首页 > Web前端

WEB前端 | HTML基础——(4)定位position

2016-09-12 20:10 459 查看

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>定位</title>
<style type="text/css">
body {
height: 3000px;
}
.div {
width: 200px;
height: 200px;
}
.div1 {
width: 600px;
height: 600px;
background-color: red;
}
.div2 {
width: 400px;
height: 400px;
background-color: yellow;
position: relative;
top: 100px;
left: 100px;
/*static 默认值
relative 相对定位，相对于自身，没有脱离文档流，自身所占空间还在，只是位置发生了改变

fixed    固定定位，固定在窗口某一个位置一般可以做广告位，做返回顶部的按钮

absolute 绝对定位，相对于带有position属性的父(父..)级来定位
如果父级都没有position属性，则相对于窗口(不是body)的左上角来定位

设置position属性之后，必须设置相应的top、left、bottom属性才能去定位
*/
/*position: relative;
top: 50px;
left: 100px;*/
/*position: fixed;*/
}
.div3 {
background-color: green;
position: absolute;
top: 100px;
left: 100px;
z-index: 10;
}
</style>
</head>
<body>
<div class="div1 div">
<div class="div2 div">我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
<div class="div3 div">
</div>
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 定位 position relative absolute fixed

相关文章推荐

新的分享

章节导航