响应式设计 - 将元素放置在相对位置

【问题标题】：Responsive design - place an element in a relative position响应式设计 - 将元素放置在相对位置
【发布时间】：2018-05-14 09:22:00
【问题描述】：

我正在尝试将<div> 放置在图像顶部的特定位置。图像宽度设置为 100% 以始终适合屏幕。

我的问题是<div> 位置与图像不相关。

在本例中，我试图将 div 附加到灰线（即使屏幕分辨率发生了变化）。

https://codepen.io/eyalankri/pen/GdGvGO

有可能吗？

【问题讨论】：

你不能使用绝对属性吗？
将图像切成两半。并将div 设置为position:absolute 到right:0。还是？
你不想在 div 上附加一条灰线吗？ ;)

标签： html css responsive-design

【解决方案1】：

试试这个codepen。

您需要为您的礼物提供百分比宽度，并以百分比单位制作左侧位置，因此它会相应地更改屏幕尺寸。

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: black
}

.slider-container {
    z-index: 0;
    min-width:1024px;
  position: relative;
     
}

.slide-image {
    width: 100%;
    min-width:1024px
}

.form-container {
    z-index: 999;
    position: absolute;
    top: 0;
    height: 300px;
    width:11%;
  
    background-color: white;
    text-align:center; 
    left: 27.5%; 
     
}

  

    <div class="slider-container">
        <div class="form-container">
      <br/>
       my div
    </div>
        <img class="slide-image" src="http://ecocar.co.il/test1.jpg" />
    </div>

【讨论】：