破坏流式布局

最新推荐文章于 2022-04-08 19:50:46 发布

qq_45723051

最新推荐文章于 2022-04-08 19:50:46 发布

阅读量105

点赞数

分类专栏： css样式

本文链接：https://blog.youkuaiyun.com/qq_45723051/article/details/102660898

版权

css样式专栏收录该内容

7 篇文章

订阅专栏

.wrap{
width: 300px;
height: 300px;
background-color: red;
/*
相对定位
1:相对自身位置进行定位
定位后：元素脱离文档流，原来的位置没有被其他元素所占据元素特点没有发生变化
top:移动后的位置距离起始位置上面多远（往下移动）
left：移动后的位置距离起始位置左面多远（往右移动）
right：移动后的位置距离起始位置右面多远（往左移动）
bottom：移动后的位置距离起始位置下面多远（往上移动）

    用途：用于某个元素微调效果
    */
    position: relative;
}
.box{
    width: 100px;
    height: 100px;
    background-color: aqua;
    /* 
    绝对定位 
    相对祖籍元素中position属性；且值不为static的元素进行绝对定位
    ————>如果所有的元素都没有position 就相对body进行定位
    定位后：块元素变为行内块元素，脱离文档流，原来的位置被其他元素所占据

    怎么定位
    top：
    */
    position: absolute;
}
.test{
    width: 200px;
    height: 200px;
    background-color: black;
    top: 0;
    right: 0;
}

nav{
height: 50px;
width: 100%;
background-color: #000;
/*
固定定位：
相对浏览器视图窗口进行定位

    定位后：当前元素变为inline-block 脱离文档流；原来的位置被其他元素所占据

    怎么定位：
    top：距离浏览器视图窗口上面多大
    left：距离浏览器视图窗口左面多大
    right：距离浏览器视图窗口右面多大
    bottom：距离浏览器视图窗口下面多大
     */
    position: fixed;
    top: 0;
}
</style>


<div class="wrap">
    <div class="box"></div>
    <div class="test"></div>
</div>

我是内容