Блог

Главная - Вопросы по программированию - Как предотвратить изменение положения элементов с абсолютной позицией при изменении размера

Как предотвратить изменение положения элементов с абсолютной позицией при изменении размера

#html #css

#HTML #css

Вопрос:

Привет, у меня вопрос о моем коде.

Вот моя проблема.

У меня есть два элемента и один фрейм. Фрейм имеет относительную позицию, а два элемента (дочерние элементы) имеют абсолютную позицию. Они должны всегда находиться в одной и той же точке внутри моего фрейма, но когда я изменяю размер, положение дочерних элементов отличается в зависимости от фрейма. Как сделать так, чтобы дочерние элементы всегда оставались в одном и том же положении для responsive design? Возможно ли это?

Попробуйте также изменить высоту окна в примере (не только ширину) https://codesandbox.io/s/adoring-jackson-c6fth?file=/index.html:0-900

 .frame {
  width: 70vh;
  height: 90vh;
  border: 10px solid red;
  margin: 10px auto;
  position: relative;
}

.objA {
  width: 130%;
  position: absolute;
  height: 40%;
  bottom: -10%;
  left: -20;
  border: 2px solid green;
  background: rgba(10, 101, 10, 0.7);
  z-index: 2;
}

.objB {
  width: 10%;
  position: absolute;
  height: 20%;
  bottom: 20%;
  left: 30%;
  background: red;
  z-index: 1;
} 
 <div class="frame"></div>
<div class="objA"></div>
<div class="objB"></div>

Я размещаю здесь свой реальный пример изображения, чтобы лучше представить, в чем проблема.

RealCase

Все объекты позиционируются абсолютно (волны, звезды, робот и т. Д.). Каждая волна должна в каждой измененной ситуации находиться в одном и том же положении. Полезно знать, что каждая волна разделена.

Комментарии:

1. Ваш запрос звучит так, как будто он противоречит сам себе. Вы хотите иметь адаптивный дизайн и позволяете фрейму изменять размер, но вы хотите, чтобы элементы оставались того же размера и не перемещались. Какого эффекта вы пытаетесь достичь при изменении размера? Какое поведение, в частности, в вашем текущем примере вы хотели бы изменить и как?

Ответ №1:

Убедитесь, что позиции и высоты / ширины указаны в процентах, и самое главное: поместите свои элементы внутри основного <div class="frame"></div> элемента. Вы можете начать так:

 * {
    box-sizing: border-box;
}

body {
    background: none #014653;
    margin: 0;
}

.frame {
    width: 70vw;
    height: 90vh;
    border: 10px solid #5cb9b8;
    background: none #5cb9b8;
    margin: 5vh auto;
    position: relative;
    border-radius: 6px;
}

.frame-stage {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 5px solid #a2cece;
    background: none #014653;
    border-radius: 5px;
}

.objA {
    width: 10%;
    position: absolute;
    height: 20%;
    bottom: 10%;
    left: -20;
    border: 2px solid green;
    background: rgba(10, 101, 10, 0.7);
    z-index: 2;
}

.objB {
    width: 10%;
    position: absolute;
    height: 20%;
    bottom: 30%;
    left: 30%;
    background: red;
    z-index: 1;
} 
 <div class="frame">
  <div class="frame-stage">
    <div class="objA"></div>
    <div class="objB"></div>
  </div>
</div>

Обновленный codesandbox здесь.