CSS--定位

最新推荐文章于 2024-11-15 11:24:51 发布

韩江宇

最新推荐文章于 2024-11-15 11:24:51 发布

阅读量77

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_39305942/article/details/109720148

版权

CSS 定位

absolute和relative分别依据什么定位

relative依据自身定位
absolute依据最近一层的定位元素定位（父元素再往上找父元素，直到找到它父元素最近一层的定位元素去定位）

定位元素

absolute relative fixed
body

案例：

<body>
    <p>absolute 与 relative 定位问题</p>
    <div class="relative">
      <div class="absolute">this is absolute</div>
    </div>
  </body>

body{
      margin: 20px;
    }
    .relative{
      position: relative;
      width: 400px;
      height: 300px;
      border: 1px solid #ccc;
    }
    .absolute{
      position: absolute;
      width: 200px;
      height: 100px;
      border: 1px solid blue;
    }

在这里插入图片描述

relative设置定位

.relative{
      position: relative;
      width: 400px;
      height: 300px;
      border: 1px solid #ccc;
      top: 20px;
      left: 50px;
    }

relative元素往下往右移动，它是对自身定位的，所有对外边元素不会有任何影响。
在这里插入图片描述

absolute 设置定位

.absolute{
      position: absolute;
      width: 200px;
      height: 100px;
      border: 1px solid blue;
      top: 20px;
      left: 50px;
    }

absolute依据往上找第一层定位元素。蓝色的框在灰色的框之内往下往右移动。
在这里插入图片描述
3. 把ralative去掉,absolute元素样式变化

.relative{
      /* position: relative; */
      width: 400px;
      height: 300px;
      border: 1px solid #ccc;
      /* 去掉ralatvie之后，这里的top,left属性不生效了 */
      top: 20px;
      left: 50px;
    }
    .absolute{
      position: absolute;
      width: 200px;
      height: 100px;
      border: 1px solid blue;
      top: 20px;
      left: 50px;
    }

由于把position:relative注释掉，relative div标签就会还原，absolute会依据往上找第一层定位元素，由于第一层的relative position:relative已经被注释掉，所有absolute的定位元素是body.
在这里插入图片描述

居中对齐有哪些实现方式

水平居中

inline元素:text-align:center
block元素:margin:auto
absolute元素:left:50% +margin-left负值(-width1/2)

垂直居中

inline元素:line-height的值等于height值
absolute元素: top:50% + margin-top负值(-width1/2) //一定要知道宽高的尺寸

absolute元素: transform(-50%,-50%)

	left:50%;
	top:50%;
	transform:translate(-50%,-50%) //css3属性，缺点是浏览器兼容性

absolute元素: top,left,bottom,right=0；margin:auto