📒html css相对悬浮定位

有时候我们写html，会有这种需求，响应式布局，某个元素相对另外一个元素定位，无论设备的宽度如何变化，这个悬浮元素都只是相对那个元素。表达起来可能有点绕，那我们来看看最终效果图：

具体代码

<div class="main">
    
<div class="content">

  <div class="suspend-left">
    <img src="./static/ra.png" />
  </div>

  <div class="suspend-right">
    <img src="./static/ra.png" />
  </div>

</div>

</div>

<style>

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.main {
  width: 100%;
  height: 100%;
}
.main, .content {
  width: 800px;
  height: 100%;
  background-color: green;
  margin: auto;
  position: relative;
}

.suspend-left {
  position: fixed;
  right: 50%;
  margin-right: 408px;
}

.suspend-right {
  position: fixed;
  left: 50%;
  margin-left: 408px;
}

</style>

1、哪个元素根据被跟着定位的元素定位，那那个元素要放在被跟着定位的元素的里面

2、定位的left、right 或者 top、bottom 要用百分比

3、左块元素 设置 right 50%，再根据margin-left去调整到合适位置即可。 右块元素同理。