我刚刚开始处理HTML和CSS.我想堆叠不同的div(见图).

黑色的div代表容器.红色div a标题和蓝色div a标题是一个圆心,圆心位于红色div的底部边缘.

解决方案最终也应该是响应性的.我在这里要考虑什么?

enter image description here

.container {
  height: 300px;
  width: 600px;
  background-color: black;
  text-align: center;
}

.header {
  height: 40%;
  width: 100%;
  background-color: red;
}

.circle {
  background-color: blue;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  display: inline-flex;
}
<div class="container">
  <div class="header">
    <div class="circle"></div>
  </div>
</div>

推荐答案

你可以使用positionflexbox

.container {
  height: 300px;
  width: 80%;
  margin: 0 auto;
  background-color: black;
  text-align: center;
}

.header {
  height: 40%;
  width: 100%;
  background-color: red;
  position: relative;
  display: flex;
  justify-content: center;
}

.circle {
  background-color: blue;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  display: inline-flex;
  position: absolute;
  bottom: 0;
  transform: translateY(50%);
}
<div class="container">
  <div class="header">
    <div class="circle"></div>
  </div>
</div>

Html相关问答推荐

在Apps Script中连接CSS与HTML

如何将FlexBox项目zoom 到其包含图像的大小

对称渐变作为背景

覆盖垫子中的边框底部 Select

每个元素的CSS网格高度相等,以保持响应性

如何创建剪切到路径的循环文本字幕?

Flex:第一个 div 有列,下一个 div 有行

为什么带有截断的 contentedible div 在受约束时会在 Chrome 中添加空格

如何将 元素与常规文本垂直对齐

添加带有悬停动画的喜欢图标

为什么我的网页显示网格区域彼此相邻,而不是我设置它们的方式?

防止HTML输入中出现负数但接受小数

将图像高度调整到容器 div 中而不使其高度增加

把标题、段落和图片放在一起

如何让 backdrop-filter: blur() 效果在 iOS 上运行?

AWS SES:如何正确使用 CSS

有没有办法在 CSS 类子句中指定多个 HTML 元素?

如何创建 宏?

将鼠标悬停在其他单词上时更改文本 colored颜色

填写输入字段后,标签留在顶部