二十二，相对与绝对定位

最新推荐文章于 2023-12-27 17:07:53 发布

好多可乐

最新推荐文章于 2023-12-27 17:07:53 发布

阅读量167

点赞数

分类专栏： CSS基础

本文链接：https://blog.csdn.net/qq_36792120/article/details/111274962

版权

CSS基础专栏收录该内容

28 篇文章 0 订阅

订阅专栏

一，在不设置定位（也就是默认定位 static 的情况下，对块级元素设置top/left等属性，无效。
二，使用绝对定位还是相对定位的一个判断依据就是文档流是否需要被破坏：绝对定位会破坏文档流——产生浮动效果
如底下代码，本来是想实现3个方块竖排紧贴在一起，实际效果：第二个覆盖第一个，第三个覆盖第二个，最终显示的只是第三个方块

<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       div{
        width: 100px;
        height: 100px;
       }
       .test1{
        background-color: red;
        position: absolute;
        top: 10px;
        left: 100px;
       }
        .test2{
        background-color: green;
        position: absolute;
        top: 10px;
        left: 100px;
       }
        .test3{
        background-color: blue;
        position: absolute;
        top: 10px;
        left: 100px;
       }
     </style>
</head>
<body>
    <div class="test1"></div>
    <div class="test2"></div>
    <div class="test3"></div>
</body>
</html>

在这里插入图片描述

在这里插入图片描述
三，作为父容器时，是使用相对定位还是绝对定位：
当父一级div中只有一组子元素的时候，使用relative(相对定位)或absolute(绝对定位)都可以达到移动效果。
但当父容器中还有其他组的子元素时，就要考虑是否破快文档流（是否使用absolute进行页面布局）

<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .main{
     position: relative;
        left: 100px;
        height: 350px;
    }
       div{
        width: 100px;
        height: 100px;
       }
     .test1{
      background-color: red;
     }
     .test2{
      background-color: green;
     }
     .test3{
      background-color: blue;
     }

     </style>
</head>
<body>
  <div class="main">
    <div class="test1"></div>
    <div class="test2"></div>
    <div class="test3"></div>
  </div>
  作为父容器时，是使用相对定位还是绝对定位：
当父一级div中只有一组子元素的时候，使用relative(相对定位)或absolute(绝对定位)都可以达到移动效果。
但当父容器中还有其他组的子元素时，就要考虑是否破快文档流（是否使用absolute进行页面布局）
</body>
</html>

好多可乐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
二十二，相对与绝对定位

一，在不设置定位（也就是默认定位 static 的情况下，对块级元素设置top/left等属性，无效。二，使用绝对定位还是相对定位的一个判断依据就是文档流是否需要被破坏：绝对定位会破坏文档流——产生浮动效果如底下代码，本来是想实现3个方块竖排紧贴在一起，实际效果：第二个覆盖第一个，第三个覆盖第二个，最终显示的只是第三个方块<html><head> <meta charset="UTF-8"> <title>Document</ti
复制链接

扫一扫

专栏目录