0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>В уроке про абсолютное позиционирование было сказано о том, что элемент позиционируется относительно угла страницы. Такое поведение не всегда удобно и тому есть несколько причин:</p>
1
<p>В уроке про абсолютное позиционирование было сказано о том, что элемент позиционируется относительно угла страницы. Такое поведение не всегда удобно и тому есть несколько причин:</p>
2
<ul><li>Мы хотим абсолютно спозиционировать элемент не относительно страницы, а относительно одного из родительских элементов.</li>
2
<ul><li>Мы хотим абсолютно спозиционировать элемент не относительно страницы, а относительно одного из родительских элементов.</li>
3
<li>При изменении ширины страницы, абсолютно спозиционированный элемент также будет перемещаться, так как его координаты отсчитываются от края.</li>
3
<li>При изменении ширины страницы, абсолютно спозиционированный элемент также будет перемещаться, так как его координаты отсчитываются от края.</li>
4
</ul><p>Представим ситуацию, при которой мы хотим создать блок с возможностью его закрытия при клике на крестик в верхнем правом углу. В данный момент нас интересует именно возможность создать такой крестик, при этом не внося сложные вещи в верстку. Для этого отлично подходит абсолютное позиционирование. С помощью него и правил top, right мы можем сказать, что крестик всегда будет располагаться в верхнем правом углу.</p>
4
</ul><p>Представим ситуацию, при которой мы хотим создать блок с возможностью его закрытия при клике на крестик в верхнем правом углу. В данный момент нас интересует именно возможность создать такой крестик, при этом не внося сложные вещи в верстку. Для этого отлично подходит абсолютное позиционирование. С помощью него и правил top, right мы можем сказать, что крестик всегда будет располагаться в верхнем правом углу.</p>
5
<p>Вопрос только в том, как расположить его относительно блока? На самом деле, элемент при абсолютном позиционировании будет расположен относительно края страницы только в тех случаях, когда ни у одного из родительских элементов нет другого позиционирования. То есть, если у родительского блока относительное или абсолютное позиционирование, то дочерний элемент (с абсолютным позиционированием) будет располагаться относительно него, а не края страницы.</p>
5
<p>Вопрос только в том, как расположить его относительно блока? На самом деле, элемент при абсолютном позиционировании будет расположен относительно края страницы только в тех случаях, когда ни у одного из родительских элементов нет другого позиционирования. То есть, если у родительского блока относительное или абсолютное позиционирование, то дочерний элемент (с абсолютным позиционированием) будет располагаться относительно него, а не края страницы.</p>
6
<p>В таком случае задача расположения элемента для закрытия блока становится простой - нам необходимо только указать относительное позиционирование у всего блока, а кнопку закрытия абсолютно спозиционировать уже относительно этого блока.</p>
6
<p>В таком случае задача расположения элемента для закрытия блока становится простой - нам необходимо только указать относительное позиционирование у всего блока, а кнопку закрытия абсолютно спозиционировать уже относительно этого блока.</p>
7
<p><a>https://codepen.io/hexlet/pen/MWgEqJj</a></p>
7
<p><a>https://codepen.io/hexlet/pen/MWgEqJj</a></p>
8
<h2>Рекомендуемые программы</h2>
8
<h2>Рекомендуемые программы</h2>