javascript - 使 div 大于其父级

标签 javascript html css

<分区>

有什么办法可以让 div 比它的父级大吗?我知道它的坏习惯。 基本上我有一个很小的 ​​div,我需要在里面创建一个 div,它将穿过整个窗口。但无法找到如何去做的方法。 感谢您的帮助。

最佳答案

您需要使用指定尺寸的 position 规则从正常流中“弹出”该元素。例如。 位置:固定;

.outer {
  width: 10vw;
  height: 10vh;
  position: relative;
  background: rgba(130, 130, 255, .3);
  border: 1px solid red;
}

.inner {
  width: 90vw;
  height: 90vh;
  position: absolute;
  left: 5px;
  top: 5px;
  background: rgba(130, 255, 130, .3);
  border: 1px solid green;
}
<div class="outer">
  <div class="inner"></div>
</div>


备选

具有指定尺寸的溢出:可见

.outer {
  width: 10vw;
  height: 10vh;
  position: relative;
  background: rgba(130, 130, 255, .3);
  border: 1px solid red;
  overflow: visible;
  display: inline-block;
  vertical-align: top;
}

.inner {
  width: 90vw;
  height: 90vh;
  margin: 5px;
  margin: 5px;
  background: rgba(130, 255, 130, .3);
  border: 1px solid green;
}
<div class="outer">
  <div class="inner"></div>
</div>

关于javascript - 使 div 大于其父级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71031978/

相关文章:

javascript - 如何在 Angular 2 的类方法中访问ajax数据

Javascript 函数在 Firefox 中不起作用,但在 chrome、safari、IE 和 Edge 中起作用

css - 条件属性中的 bool 字符串与 MVC4/Razor 2 的比较返回意外结果

javascript - 还原, react 。如何将 mapStateToProps 添加到 this.state 中?

javascript - firefox 中的样式属性

javascript - 按品牌一一展示产品系列

jquery - 将图像附加到 Jquery UI 容器

javascript - AppendTo() 元素,jQuery CSS 类更改不起作用

javascript - 无法将焦点转移到“发货”屏幕上的“发货编号”字段

javascript - 为什么我在 AngularJs 中的指令不起作用?