Nano Hash - криптовалюты, майнинг, программирование

Я не понимаю абсолютное и относительное позиционирование в CSS

body {
    margin: 0;
}

.wrap {
    width: 800px;
    height: 1000px;
    position: relative;
    margin: auto;
    background: #e3e3e3;
}

.box {
    width: 400px;
    height: 400px;
    margin: auto;
    background: red;
    position: absolute;
    left: 20px;
    top: 30px;  
}

У меня есть небольшая разметка и некоторый CSS, на котором я учусь. Пожалуйста, скажите мне, почему .wrap, который содержит .box, должен быть относительным, а другой абсолютным. Почему оба не могут быть абсолютными или относительными. Это может быть глупый вопрос, но независимо от того, сколько руководств я прочитал, я не могу обойти это. Подробный ответ Пожалуйста.

html css position
26.03.2014

  • Возможный дубликат stackoverflow.com/questions/10487292 / 26.03.2014
  • да @HamedKamrava, но я не понял этого из этих сообщений, пока читал их, дал гораздо лучший ответ 26.03.2014

Ответы:


1

Абсолютное позиционирование означает, что элемент полностью выведен из обычного потока макета страницы. Что касается остальных элементов на странице, абсолютно позиционированного элемента просто не существует. Затем сам элемент рисуется отдельно, как бы «поверх» всего остального, в позиции, которую вы указываете с помощью атрибутов «левый», «правый», «верхний» и «нижний».

Используя позицию, указанную вами с помощью этих атрибутов, элемент затем помещается в эту позицию в своем последнем элементе-предке, который имеет атрибут позиции, отличный от статического (статический — это использование элементов позиционирования, если они не имеют указанного атрибута позиции), или тело документа (окно просмотра браузера), если такого предка не существует.

Например, если бы у меня был этот код:

<body>
  <div style="position:absolute; left: 20px; top: 20px;"></div>
</body>...then the <div> would be positioned 20 px from the top of the browser viewport, and 20px from the left edge of same.

Однако, если бы я сделал что-то вроде этого:

<div id="outer" style="position:relative">
   <div id="inner" style="position:absolute; left: 20px; top: 20px;"></div>
 </div>...

тогда внутренний div будет расположен на 20 пикселей сверху внешнего div и на 20 пикселей от левого края того же, потому что внешний div не позиционируется с position:static, потому что мы явно установили его для использования position:relative.

Относительное позиционирование, с другой стороны, похоже на полное отсутствие позиционирования, но атрибуты левый, правый, верхний и нижний «выталкивают» элемент из его нормального расположения. Остальные элементы на странице по-прежнему располагаются так, как если бы элемент находился на своем обычном месте.

Например, если бы у меня был этот код:

<span>Span1</span>
<span>Span2</span>
<span>Span3</span>...

тогда все три элемента будут располагаться рядом друг с другом, не перекрывая друг друга.

Если я настрою второй для использования относительного позиционирования, например:

<span>Span1</span>
<span style="position: relative; left: -5px;">Span2</span>
<span>Span3</span>...

тогда Span2 будет перекрывать правую сторону Span1 на 5 пикселей. Span1 и Span3 должны располагаться точно в том же месте, что и в первом примере, оставляя зазор в 5 пикселей между правой стороной Span2 и левой стороной Span3.

Надеюсь, это немного проясняет ситуацию

Подробнее см. здесь: http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Это тоже хороший вариант: http://sitepoint.refererence.sitepoint.com

26.03.2014

2

позиция: относительная

Если вы укажете position:relative, то вы можете использовать top или bottom, и left или right для перемещения элемента относительно того места, где он обычно находится в документе.

позиция:абсолютная

Когда вы указываете position:absolute, элемент удаляется из документа и помещается именно туда, куда вы указываете.

см. примеры и другие сведения на сайте ammanu.

24.04.2017

3

абсолютная позиция

Элемент с абсолютным положением позиционируется относительно первого родительского элемента, положение которого отличается от статического. Элементы с абсолютным позиционированием удаляются из обычного потока. Документ и другие элементы ведут себя так, как будто абсолютно позиционированный элемент не существует. Абсолютно позиционированные элементы могут перекрывать другие элементы.

относительное положение

Элемент с относительным позиционированием позиционируется относительно своего нормального положения. Содержимое элементов с относительным позиционированием можно перемещать и перекрывать другие элементы, но зарезервированное пространство для элемента по-прежнему сохраняется в обычном потоке.

26.03.2014

4

Абсолютное позиционирование: элемент позиционируется относительно первого нестатически (например, относительного) позиционированного родительского элемента в иерархии.
Относительное позиционирование: элемент позиционируется относительно его собственной позиции, определяемой браузером в потоке рендеринга документа.

Итак, учитывая, что элемент обертки должен быть оболочкой вокруг элемента коробки -> вам нужно обернуть как относительное, а поле как абсолютное.

26.03.2014
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..