<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*#position1{*/
/*background-color: palegoldenrod;*/
/*width: 100px;*/
/*height: 100px;*/
/*position: relative;*/
/*left: 30px;*/
/*top:50px;*/
/*}*/
/*绝对布局,不占用位置*/
/*#position1{*/
/*background-color: palegoldenrod;*/
/*width: 100px;*/
/*height: 100px;*/
/*position: absolute;*/
/*left: 30px;*/
/*top:50px;*/
/*}*/
/*fixed:位置固定了,不会跟着滚动条滚动*/
/*#position1{*/
/*background-color: palegoldenrod;*/
/*width: 100px;*/
/*height: 100px;*/
/*position: fixed;*/
/*left: 30px;*/
/*top:50px;*/
/*}*/
/*静态时,设置偏移量(top,left。。)时不管用*/
#position1{
background-color: palegoldenrod;
width: 100px;
height: 100px;
position: relative;
left: 30px;
top:50px;
z-index:3;
}
/*与前面一个div重合在一起了*/
#position2{
background-color: red;
width: 100px;
height: 100px;
position: relative;
left: 20px;
top:20px;
z-index: 2;
}
</style>
</head>
<body>
<!--
css定位:改变元素在页面上的位置
css定位机制:
普通流:元素按照其在html中的位置顺序决定排布的过程(根据摆放顺序)
浮动:
绝对布局:
定位属性:
positon:把元素放在一个静态的,相对的,绝对的或固定的位置中
top:
left:
right:
bottom
overflow:设置元素溢出其区域发生的事情 (是否出现滚动动)
clip:设置元素显示形状 (主要用于图片)
vertical-align:垂直对齐方式
z-index:堆叠顺序(优先级)
positon:
static:
relative:
absoulte:
-->
<div id="position1"></div>
<div id="position2"></div>
<script>
for(var i=0;i<100;i++){
document.write(i+"<br/>")
}
</script>
</body>
</html>
html css学习笔记-定位
最新推荐文章于 2024-04-28 07:02:17 发布