关于定位的属性设置
position:设置 HTML 元素的定位方式relative
《一》 static:默认值。无特殊定位,html 元素遵循 HTML 定位规则 。
语法: 选择器{position:static; }
1.静态定位按照标准流特性摆放位置,它没有边偏移。
2.静态定位在布局时很少用到。
《二》 absolute:绝对定位。脱离 HTML 默认的定位规则,使用 left , right , top , bottom 等
属性相对于其最接近的一个具有定位设置的父对象进行绝对定位。
语法:
选择器 {position: absolute ;}
特点:
1.如果没有父元素或者父元素没有 定位则以浏览器为定位(Document文档)
2.如果父元素有定位(相对、绝对、固定定位)则以最近一级的有定位的父元素为参考点移动位置
3.绝对定位不再占有原来的位置(脱标)
《三》relative:相对定位。
相对定位是元素在移动位置的时候,是相对于他原来的位置来说的。不脱离 HTML 默认的定位规则,但将依据 left , right , top , bottom 等属性在正常文档流中偏移位置。
语法:
选择器 {position : relative ;}
特点:
1.它是相对于自己原来的位置来移动的(移动的时候参照原来的位置)
2.当它移动后,原来的位置会继续保留,后面的盒子不会占有他原来的位置仍然以标准流的方式对待它因此,相对定位并没有脱标,它最典型的应用是给绝对定位当父级
left【左距】,right【右距】 , top【上距】 , bottom【下距】 必须定义 position
属性值为 absolute
或者 此取值方可生效。
HTML 默认的定位规则,html 元素在 HTML 文件中按照从左上角向右下角一次排列,遇见块 级元素折行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>层叠设置</title>
<style>
#div1{
width: 300px;
height: 200px;
background-color: aqua;
position: absolute;
left: 100px;
top: 120px;
z-index: 1;
}
#div2{
width: 300px;
height: 200px;
background-color: yellow;
position: absolute;
left: 150px;
top: 160px;
z-index: 2;
}
#div3{
width: 300px;
height: 200px;
background-color: pink;
position: absolute;
left: 200px;
top: 220px;
z-index: 3;
}
#div4{
width: 300px;
height: 200px;
background-color: green;
position: absolute;
left: 250px;
top: 260px;
z-index: 4;
}
div p{
font-size: 20px;
}
</style>
</head>
<body>
<div id="div1">
<p align="right">1</p>
</div >
<div id="div2">
<p align="right">2</p>
</div >
<div id="div3">
<p align="right">3</p>
</div>
<div id="div4">
<p align="right">4</p>
</div>
</body>
</html>
z-index:设置对象的层叠顺序 较大 number 值的对象会覆盖在较小 number 值的对象之上
注意:z-index 属性的有效性与 position 属性有关。
**制作计算器页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算机制作</title>
<style>
table{
width: 280px;
height: 320px;
background-color: pink;
border: 5px solid red
}
span{
float: right;
}
a{
font-size: 15px;
color: black;
text-decoration: none;
}
#inp{
width: 260px;
height: 40px;
font-size: 30px;
text-align: right;
}
input[type=button]{
width: 60px;
height: 50px;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="4">
<img src="imgs/tubiao.PNG">
计算器
<span>
<input type="button" value="-" />
<input type="button" value="□" />
<input type="button" value="x" />
</span>
</td>
</tr>
<tr>
<td colspan="4">
<a href="#">查看</a>
<a href="#">编辑</a>
<a href="#">帮助</a>
</td>
</tr>
<tr>
<td colspan="4"> <input id="inp" type="text" value="0" readonly="readonly"/> </td>
</tr>
<tr>
<td><input type="button" value="1" /></td>
<td><input type="button" value="2" /></td>
<td><input type="button" value="3" /></td>
<td><input type="button" value="+" /></td>
</tr>
<tr>
<td> <input type="button" value="4" /> </td>
<td> <input type="button" value="5" /> </td>
<td> <input type="button" value="6" /> </td>
<td> <input type="button" value="-" /> </td>
</tr>
<tr>
<td> <input type="button" value="7" /> </td>
<td> <input type="button" value="8" /> </td>
<td> <input type="button" value="9" /> </td>
<td> <input type="button" value="*" /> </td>
</tr>
<tr>
<td> <input type="button" value="0" /> </td>
<td> <input type="button" value="C" /> </td>
<td> <input type="button" value="/" /> </td>
<td> <input type="button" value="=" /> </td>
</tr>
</table>
</body>
</html>