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

推荐答案

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

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

您的HTML的 struct 类似于以下内容:

<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相关问答推荐

CSS媒体查询不显示所需的输出

Next.js 条件样式

Angular Material - 将 matsnackbar 置于所有对话框之上

具有共享的自动调整列宽的多个 CSS 网格

CSS Select 器在 rvest 中找到,在 RSelenium 中找不到

Tailwind CSS 隐藏和可见

react 样式的条件类名称设置

CSS网格使sibling 项目拉伸

在移动设备上touch 屏幕边缘的元素(Material UI)

如何断言 CSS 属性包含Cypress 测试中的一些文本?

CSS中的旋转地球

使用 Twitter Bootstrap 使页脚粘在页面底部

css 单行或多行垂直对齐

空的 iframe src 是否有效?

如何在 CSS 中延迟 :hover 效果?

如何防止内联块 div 换行?

通过 JavaScript 更改 CSS 伪元素样式

仅当存在 2 个类时,您可以使用 CSS 定位元素吗?

100% 高度减go 标题?

仅使用 css 的换行符(如
)