使用 position突破父元素大小限制

最新推荐文章于 2022-10-30 21:14:02 发布

Incomplete life

最新推荐文章于 2022-10-30 21:14:02 发布

阅读量1.7k

点赞数

分类专栏： html | css | js

本文链接：https://blog.csdn.net/weixin_42512245/article/details/90142728

版权

html | css | js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用 position突破父元素大小限制

当父元素<div>定义了大小后,子<div>要突破大小限制，或者这时在里面添加背景图片，大小要突破大小限制时，可以使用position。
css代码：

<style>
 .div1{
  border-style:solid;
     border-width:1px;
  width: 400px;
  height: 300px;
  position:relative;
 }
 .div2{
  border-style:solid;
     border-width:1px;
  width: 200px;
  height: 100px;
  margin-left:50px;
  margin-top: 50px;
  //margin:auto;
 }
 .div3{
  width:100%;
  height:100%;
  background-color:red;
  position:absolute;
  margin-left:-50px;
  margin-top: -50px;
  
 }
</style>

html代码：

<html>
<div class="div1">
 <div class="div2">
  <div class="div3">
  </div>
 </div>
 
</div>
</html>

div3受div2大小限制，用position突破，在div2前添加div1，div1使用position:relative;
div3使用position:absolute;由于div2没有使用position，所以div3 width:100%;height:100%;时
跟随div1大小，但是位置还是div2的起始位置，所以div3使用margin-left:-50px;
margin-top: -50px;就改变到div1的相对位置。