文章/答案/技术大牛

发布

社区首页 >问答首页 >两个迪夫互相依赖，但他们不应该

问两个迪夫互相依赖，但他们不应该
EN

Stack Overflow用户

提问于 2022-08-03 18:01:19

回答 1查看 25关注 0票数 0

我对CSS非常陌生，所以我尝试了一些CSS-战斗只是为了学习一些基本知识。我试图得到一个有两座山的圆圈，我想要产生两个div，旋转它们45度，然后定位它们，这样它们就能与所需的图片相匹配。为了测试，我把第二座山漆成黑色。

* {
  margin: 0;
  padding: 0;
}

.background {
  align-items: center;
  justify-content: center;
  display: flex;
  width: 100vw;
  height: 100vh;
  background-color: #293462;
}

.circle {
  position: relative;
  display: flex;
  background-color: #FFF1C1;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
}

.mountain {
  position: relative;
  background-color: #FE5F55;
  transform: rotate(45deg);
  height: 200px;
  width: 200px;
}

.mountain-1 {
  background-color: #FE5F55;
  top: 100px;
  left: 41px;
}

.mountain-2 {
  background-color: black;
  top: 170px;
  right: 70px
}

<div class="background">
  <div class="circle">
    <div class="mountain mountain-1">
    </div>
    <div class="mountain mountain-2">
    </div>
  </div>
</div>

结果

这是我第一次尝试。然后，我注意到，当我设置“山-1”到“零”的显示时，山-2的位置发生了变化，即使在寻找解决方案之后，我也不想也不理解。

CSS改变了

  .mountain-1{
    background-color: #FE5F55;
    top: 100px;
    left: 41px;
    display: none;
  }

结果

另外，当我改变HTML中两个div的顺序时，结果也会发生变化，这在我看来并不是最有意义的。

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-08-03 18:31:56

两个<div>元素相互依赖的主要原因是它们都将position CSS属性设置为relative。他们从父元素CSS .mountain继承这一点。

这意味着的顶部、左、右和底部的属性将相对于同一容器中的其他元素。要解决这个问题，您需要将每个山的position属性设置为absolute。这意味着位置的设置完全基于您在顶部、左、右或底部中使用的值。另外，如果没有将父元素的位置设置为relative，则使用position: absolute将基于<body>元素放置元素。因此，如果您希望元素的位置基于其父元素的边界，也可以将其父元素的位置设置为relative。

      *{
        margin: 0;
        padding: 0;
      }
      .background{
        align-items: center;
        justify-content: center;
        display: flex;
        width: 100vw;
        height: 100vh;
        background-color: #293462;
      }
      .circle{
        position:relative;
        display: flex;
        background-color: #FFF1C1;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        overflow: hidden;
      }
      .mountain{
        position: relative;
        background-color: #FE5F55;
        transform: rotate(45deg);
        height: 200px;
        width: 200px;
    
      }
      .mountain-1{
        position: absolute;
        top: 105px;
        left: 40px;
      }
      .mountain-2{
        position: absolute;
        top:170px;
        right: 70px
      }

    <div class="background">
      <div class="circle">
        <div class="mountain mountain-1">
        </div>
        <div class="mountain mountain-2">
        </div>
      </div>
    </div>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73225854

复制

相似问题

问两个迪夫互相依赖，但他们不应该
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问两个迪夫互相依赖，但他们不应该EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问两个迪夫互相依赖，但他们不应该
EN