css3中的元素定位答案

【问题标题】：element positioning in css3css3中的元素定位
【发布时间】：2021-01-20 16:15:42
【问题描述】：

这是我的导航设计项目之一。当我拉伸一个窗口时，那些旋转的 div 得到分散的。有人可以建议我在这种情况下我能做什么，我希望它总是一样的调整大小/缩放窗口时的位置。谢谢你的帮助。大屏幕上的结果是这些 div 的原始位置应该是什么，但是当我调整到较小的尺寸时，这些 div 会相互重叠

*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
}

.main_div{
    height:100vh;
    width: 100%;
    background-color: black;
    position: relative;
    margin: 0 auto;
    
    
}

.div1{
    height: 100px;
    width: 100px;
    background: blue;
    position: absolute;
    top: 5%;
    left:5%;
    transform: rotate(45deg);
   
}

.div2{
    height: 200px;
    width: 200px;
    background:red;
    position: absolute;
    top: 14%;
    left:9%;
    transform: rotate(45deg);
    

    
}

.div3{
    height: 90px;
    width: 90px;
    background:white;
    position: absolute;
    top: 33%;
    transform: rotate(45deg);
    left:1%;
    margin-left: 2%;
    
    
    
}

.div4{
  height:90px;
  width: 90px;
  position: absolute;
  background: green;
  top:43%;
  transform: rotate(45deg);
  left:7%;
  margin-left:0.7%;
}

.div5{
    height: 100px;
    width: 100px;
    background:yellow;
    position: absolute;
    top: 53%;
    left:13%;
    transform: rotate(45deg);
}

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="nav.css">
    </head>
    <body>
        <div class="main_div">
            <div class="div1"></div>
            <div class="div2"></div>
            <div class="div3"></div>
            <div class="div4"></div>
            <div class="div5"></div>
            <div class="div6"></div>
            <div class="div7"></div>

        </div>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        
        <script src="" async defer></script>
    </body>
</html>

【问题讨论】：

如果您不希望元素受窗口尺寸影响，请使用固定像素值而不是百分比。

标签： html css web sass

【解决方案1】：

我会说相对位置，因为您不希望 div 重叠。代替绝对位置，使用 div 的相对位置，并相应地定位它。示例：

position: relative; 而不是position: absolute;

【讨论】：

好的，我会尝试，但是当我将这些 % 转换为 px/rem 时，它不会重叠。谢谢你的回复。

【解决方案2】：

为此，不要使用 % 使用静态单位（如 px）将它们水平和垂直对齐，这将防止它们调整大小，也不要提供以 % 为单位的边距，将其放在 px 中。 OR 这是解决方案，它可以防止结构变形，但左边框窗口和结构之间的间距可能会有所不同。好吧，我只为两个矩形做了它，你应该尝试其他的。方法是您可以使用您的代码，除了在为 div1 给出 vh、vw 或 % 的 left 和 top 值之后的一件事，其余的潜水给它们相对于您可以使用的 div1 的 left 和 top 值

left:calc(div1_left_value + additional_value_in_px);

类似于顶部，即

top:calc(div1_top_value + additional_value_in_px)

基本上，它会相对于第一个 div 的位置静态放置所有 div。

*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
}

.main_div{
    height:100vh;
    width: 100%;
    background-color: black;
    position: relative;
    margin: 0 auto;
    
    
}

.div1{
    height: 100px;
    width: 100px;
    background: blue;
    position: absolute;
    top: 20vh;
    left:15vw;
    transform: rotate(45deg);
}

.div2{
    height: 200px;
    width: 200px;
    background:red;
    position: absolute;
    top: calc(20vh + 100px);
    left:calc(15vw + 100px);
    transform: rotate(45deg);
}

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="nav.css">
    </head>
    <body>
        <div class="main_div">
            <div class="div1"></div>
            <div class="div2"></div>
        </div>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        
        <script src="" async defer></script>
    </body>
</html>

【讨论】：