我想相对于另一个定位四个div.我有一个矩形div,我想在它的角部插入4个div.我知道CSS有一个属性"position:relative",但这是相对于该元素的正常位置的.我希望我的div不是相对于它们的正常位置,而是相对于另一个元素(矩形).我该怎么办?

推荐答案

position: absolute将根据坐标定位元素,相对于closest positioned ancestor,即最接近的父元素不是position: static.

将您的四个div嵌套在目标div中,给目标div指定position: relative,并在其他div上使用position: absolute.

您的HTML的结构类似于以下内容:

<div id="container">
  <div class="top left"></div>
  <div class="top right"></div>
  <div class="bottom left"></div>
  <div class="bottom right"></div>
</div>

这个CSS应该可以工作:

#container {
  position: relative;
}

#container > * {
  position: absolute;
}

.left {
  left: 0;
}

.right {
  right: 0;
}

.top {
  top: 0;
}

.bottom {
  bottom: 0;
}

...

Css相关问答推荐

CSS3 - RotateY() 居中

将 CSS 注入 Shadow 根.然而风格正在受到影响

SASS - 跨多个文件使用变量

弹性盒项目之间的间距

如何更改 Angular Material 上 mat-icon 的大小?

使用 CSS 格式化数字(小数位、千位分隔符等)

CSS中心显示内联块?

CSS 中正确影响其父级高度的旋转元素

Angular 5 在某些类中添加了“ng-star-inserted”——那是什么?

如何使用 classes props 在 Material UI 中添加多个类?

CSS 中的@apply 是什么?

在 react-native 中使用 flex 使项目粘在底部

如何更改 CSS:JavaScript 中的根 colored颜色 变量

在Angular 2中动态更新css

初始值和未设置值之间有什么区别?

如何在 Flexbox 中禁用等高列?

在无序列表中的项目之后添加管道分隔符,除非该项目是最后一行

仅当 flex 项目被包装时,margin-top

是否有与 :hover 相对的 CSS 伪类?