前端定位position与百度页面模拟

最新推荐文章于 2024-10-30 16:06:51 发布

yamotl

最新推荐文章于 2024-10-30 16:06:51 发布

阅读量50

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/yamotl/article/details/134066714

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

定位 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;
}