如何定位我的 img 文件以使它们相互重叠？

Question

大家好，我有定位问题。我有一个名为 Circle 的 div，其中包含七个 SVG 文件。 SVG 文件是在 Illustrator 中创建的，当它们彼此层叠时形成一个图形。这是一个示例，展示了它的整体外观。

但是，我的 SVG 文件是线性显示的。在我的CSS中，我在.circle类上使用position:absolute，这应该将SVG文件放置在正确的位置，但事实并非如此。谁能帮我定位我的 SVG 文件吗？

* {
    padding: 0;
    margin: 0;
  }
  
  body {
    background-color: pink;
  }
  
  .parent {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .img {
    z-index: 1;
    width: 150px;
    height: 150px;
  }
  
  #container {
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    position: absolute;
  }
  

.circle {
  position: absolute;
  }

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> circle </title>
  <link rel="stylesheet" href="styles.css">

</head>

<body>
  <div class="parent">
    <div id="container">
      <div class="circle">  
    <img id="circle_big" src="palette.svg">  
    <img id="samll_1" src="small_1.svg">
    <img id="small_2" src="small_2.svg">
    <img id="small_3" src="small_3.svg">
    <img id="small_4" src="small_4.svg">
    <img id="small_5" src="small_5.svg">
    <img id="small_6" src="small_6.svg"> 
      </div>
      
    </div>
   
  </div>


</body>

</html>

Answer 1

这是一个利用一系列柔性行的解决方案：

HTML：

<div class="parent">
    <div id="container"> 
        <div class="row small">
          <img id="samll_1" src="small_1.svg">
          <img id="small_2" src="small_2.svg">
        </div>
        <div class="row large">
          <img id="small_3" src="small_3.svg">
          <img id="small_4" src="small_4.svg">
        </div>
        <div class="row small">
          <img id="small_5" src="small_5.svg">
          <img id="small_6" src="small_6.svg"> 
        </div>
    </div>
</div>

CSS：

.parent {
    width: 100vw;
    height: 100vh;
  }
  
  img{
    z-index: 1;
    width: 150px;
    height: 150px;
  }
  
  #container {
    z-index: 2;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
  }
  
  img {
    border: 1px solid black;
  }

  .row {
    position: relative;
    display: flex;
    flex-flow: row !important;
    justify-content: space-between;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
  }
  .small {
    width: 350px;
  }
  .large {
    width: 450px;
  }

如何定位我的 img 文件以使它们相互重叠？

问题描述投票：0回答：1

1个回答

最新问题

如何定位我的 img 文件以使它们相互重叠？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1