<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="muyou">
<meta name="Keywords" content="牧佑叔叔">
<meta name="Description" content="--牧佑">
<title>Document</title>
<style>
/* 去掉 浏览器的-外边距, 谷歌为8 IE为15*/
body {
margin:0;
}
#box {
height:200px;
background:blue;
}
#div1,#div2 {
width:100px;
height:100px;
margin-bottom:20px;
border:1px solid red;
margin-top:20px;
margin-left:100px;
background:red;
}
#div2 {
position:absolute;
left:100px;
top:100px;
}
#div3 {
width:100px;
height:100px;
background:#000;
position:abs
}
#div4 {
width:100px;
height:100px;
background:#230fba;
position:fixed;
left:500px;
top:400px;
cursor:pointer; /* 鼠标指针样式换成手指*/
/* 可以自定义 光标*/
cursor:url(qq.cur) ,default;
/* url 里面 是要cur 格式的 不能png 然后最后需要默认样式
才能执行*/
}
</style>
</head>
<body>
<!-- position:fixed; 参照物相当于整个可视区。整个文档 IE 6.7.8不支持固定定位
手机端不支持 固定定位-->
<!-- 定位元素有一个问题。就是如果自己父级元素设置了绝对定位,
然后子级设置了 定位之后,是根据父级来 定位。
如果父级没有设置定位 只是一个普通的父级,那子级去找 更高一级的元素。
比如说爷爷。如果爷爷没有定位。 那就根据 document 来定位。-->
<!-- 相对定位 参照物是自己的原始位置-->
<!-- 设置了绝对定位的层级。后面元素的层级比前面的元素层级要大-->
<!--如果 不设置宽高的话,默认第一个div 会成为块级元素,里面的元素不能
设置宽高。会成为内联元素 内联元素的宽高会被内容撑大,如果想把内联元素
变成块级元素,display:block ;或者是 绝对定位 脱离文档流,就可以变成块级元素了
或者是 inline-block 内联快
如果把 块级元素变成内联元素 需要 display:inline-->
<!-- 给元素顶一个位置 相对定位 元素不脱离文档流 position:relative;
left:200px;
right:100px;-->
<div id="box">
<div id="div1"></div>
<div id="div2"></div>
</div>
<div id="div3">
<div id="div4"></div>
</div>
</body>
</html>