定位 position static(默认) relative(相对定位) absolute(绝对定位) fixed(固定定位)
使用定位的目的使用其配套属性,left right top bottom
z-index(z轴的层次)
1.纯使用 relative 依然保留字节原有的物理空间(比如上移,它下方的元素不会上移占用它的空间),以原有的位置
为定位参考点(比如30pxbottom相对之前底部移动30px),随着浏览器的滚动而滚动
2.纯使用absolute 不保留自己原有的物理空间(移动之后,其他元素可能会占用它的空间),以浏览器为定位参考点,
(30pxbottom相对浏览器底部30px), 随着浏览器的滚动而滚动
3.纯使用fixed 不保留自己的物理空间,以浏览器为参考点,不随着浏览器的滚动而滚动
4.结合使用relative和absolute 祖先元素使用relative,当前元素使用absolute,保证当前元素不保留自己原有的物理空间,以使用relative的
祖先元素为定位参考点,随着浏览器的滚动而滚动
ps.父元素使用relative 子元素使用absolute
5.z-index设置元素的堆叠层级,层级高的覆盖在层级低的上面;
练习结合使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/show2.css">
</head>
<body>
<div class="logoBox">
<img src="/img/1.png" alt="" class="logo">
</div>
<div class="search">
<div class="inputBox">
<input type="text" class="input">
<img src="/img/2.png" alt="" class="photo">
</div>
<!-- 长兄为父思想 -->
<input type="button" value="百度一下" class="btn">
</div>
</div>
</body>
</html>
css如下
*{
margin:0;
}
.logoBox{
text-align: center;
}
.logoBox .logoBox
{
width: 300px;
}
.search{
display: flex; /*横向布局*/
justify-content: center;/*居中*/
}
.search .inputBox
{
width: 500px;
position: relative;
}
.search .inputBox .input
{
width: 100%;/*和inputBox保持同宽*/
}
.search .inputBox .photo
{
position: absolute;
right:10px;
top:6px;
}