时间戳

首页 > 解决方案 > 如何让背景形状定位在页面下方的部分中？- CSS

html - 如何让背景形状定位在页面下方的部分中？- CSS

问题描述

我试图在我的 CSS 中围绕背景放置几个形状，但不知道该怎么做。它在我的英雄部分工作得很好——但那是在页面的顶部。这个在页面的中间位置，每当我将“绝对”设置为父级而“相对”设置为子级时，它会将元素定位在顶部。

例如，我希望我的第一个正方形在我的部分容器中距离顶部 12% 和距离左侧 23% 。然后我想将我的另外两个放置在页面上的其他随机 % 点。

这是我的代码：

.features-section {
  height: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.features-section li {
  height: 50px;
  width: 50px;
  border-radius: 5%;
  display: block;
  list-style: none;
}

.features-section li:nth-child(1) {
  top: 12%;
  left: 23%;
  background: #ffa299;
  opacity: 0.5;
}
<section class="features-section">
  <ul class="features-animation-list">
    <li></li>
    <li></li>
    <li></li>
  </ul>
</section>

形状将是 li:nth-child(2) / (3) 等，所以我只包括了一个。

任何指针？

标签： htmlcss

解决方案

.features-section {
  height: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; /*Set relative postion to parent*/
}

.features-section li {
  height: 50px;
  width: 50px;
  border-radius: 5%;
  display: block;
  list-style: none;
  position: absolute; /* Set absolute position to child*/
}

.features-section li:nth-child(1) {
  top: 12%; 
  left: 23%;
  background: #ffa299;
  opacity: 0.5;
}

.features-section li:nth-child(2) {
  top: 12%; 
  left: 40%;
  background: #ffa299;
  opacity: 0.5;
}
<section class="features-section">
  <ul class="features-animation-list">
    <li></li>
    <li></li>
    <li></li>
  </ul>
</section>

推荐阅读