图解absolute / relative 之间关系

频道:网页设计 日期: 浏览:415

1. Absolute:绝对定位,是相对于最近的且不是static定位的父元素来定位

2. Fixed:绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动。

3. Relative:相对定位,是相对于其原本的位置来定位的。

4. Static:默认值,没有定位。

5. Inherit:继承父元素的position值。

初始设置四个div

<body>
	<div class="sun1">sun1</div>
	<div class="sun2">sun22222</div>
	<div class="sun3">sun3</div>
	<div class="sun4">sun4</div>
</body>复制代码



1. 子元素absolute

.sun2{
    position: absolute;
    height: 100px;
    left: 50px;
    top: 50px;
    background-color:cadetblue
}
  • 第二个元素设置absolute, 脱离文档流,宽度由文字sun2222撑开,top跟left根元素即html元素来定位



2.子元素relative

.sun2{
    position: relative;
    height: 100px;
    left: 50px;
    top: 50px;
    background-color:cadetblue
}复制代码
  • 设置relative的div不会影响其他div的位置,且top和left是相对于它原本自身的位置来定位, 宽度还是原来父级的宽度



3.子元素设置一个父级absolute, 子元素absolute

.sun{
      position:absolute;
      height: 200px;
      background-color: coral;
    }
    .sun2{
      position: absolute;
      height: 100px;
      left: 50px;
      top: 50px;
      background-color:cadetblue
    }

<div class="sun1">sun1</div>
      <div class="sun">
        这里是sun22222的父元素
        <div class="sun2">sun22222</div>
      </div>
      <div class="sun3">sun3</div>
      <div class="sun4">sun4</div>复制代码
  • sun2就会相对于父sun的div来定位。子元素sun 宽度由文字sun22222内容撑开决定



  • 子元素sun2222 设置一个500px,宽度不会把父元素撑开



4.子元素设置一个父级absolute, 子元素relative

.sun{
      position:absolute;
      height: 200px;
      background-color: coral;
    }
    .sun2{
      position: absolute;
      height: 100px;
      left: 50px;
      top: 50px;
      background-color:cadetblue
    }

.sun{
      position:absolute;
      height: 200px;
      background-color: coral;
    }
    .sun2{
      position: relative;
      height: 100px;
      left: 50px;
      top: 50px;
      background-color:cadetblue
    }复制代码
  • sun2就会相对于父sun的div来定位。子元素sun2222 宽度与父元素相同



  • 子元素sun2222 设置一个500px,宽度会把父元素撑开



5.子元素设置一个父级relative, 子元素absolute(常用)

.sun{
      position: relative;
      height: 200px;
      background-color: coral;
    }
    .sun2{
      position: absolute;
      height: 100px;
      width: 500px;
      left: 50px;
      top: 50px;
      background-color:cadetblue
    }复制代码
  • 子元素定位相对于父元素



  • 子元素定位相对于父元素,子元素设置宽度不会影响父元素



总结:

  • absolute: 会脱离文档流 ,定位是相对于离它最近的且不是static定位的父元素而言,若该元素没有设置宽度,则宽度由元素里面的内容决定,且宽度不会影响父元素,定位为absolution后,原来的位置相当于是空的,下面的的元素会来占据。

  • relative: 不会脱离文档流,定位是相对于原本自身的位置,若没有宽度,那么宽度为父元素宽度,该元素的宽度会影响父元素的的大小


评论留言

暂时没有留言!

我要留言