Поместите элемент HTML относительно его контейнера, используя CSS

Я пытаюсь создать горизонтальный 100% -ный граф с разбивкой по строкам, используя HTML и CSS. Я хотел бы создать бары, используя DIVs с цветами фона и процентной шириной, в зависимости от значений, которые я хочу отображать. Я также хочу, чтобы линии сетки отмечали произвольное положение вдоль графика.

В моих экспериментах я уже установил столбцы горизонтально, назначив свойство CSS float: left. Тем не менее, я бы хотел этого избежать, так как это действительно путается с макетом. Кроме того, линии сетки, похоже, не работают очень хорошо, когда прутки плавают.

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

  • Кросс-браузер (в идеале без слишком большого количества браузеров)
  • Выполняется в режиме Quirks
  • Как можно яснее/чистнее, чтобы облегчить настройку
  • Готово без JavaScript, если это возможно.

ОТВЕТЫ

Ответ 1

Вы правы, что позиционирование CSS - это путь. Здесь быстрый бег вниз:

position: relative будет размещать элемент относительно себя. Другими словами, элементы располагаются в нормальном потоке, затем они удаляются из нормального потока и смещаются на любые значения, которые вы указали (верхний, правый, нижний, левый). Важно отметить, что, поскольку он удален из потока, другие элементы вокруг него не будут перемещаться вместе с ним (вместо этого используйте отрицательные поля, если вам нужно такое поведение).

Тем не менее, вы, скорее всего, заинтересованы в position: absolute, который будет позиционировать элемент относительно контейнера. По умолчанию контейнер является окном браузера, но если в родительском элементе установлен position: relative или position: absolute, он будет выступать в роли родителя для определения координат своих дочерних элементов.

Для демонстрации:

#container {
  position: relative;
  border: 1px solid red;
  height: 100px;
}

#box {
  position: absolute;
  top: 50px;
  left: 20px;
}
<div id="container">
  <div id="box">absolute</div>
</div>

Ответ 2

Вы должны явно установить положение родительского контейнера вместе с положением дочернего контейнера. Типичный способ сделать это примерно так:

div.parent{
    position: relative;
    left: 0px;  /* stick it wherever it was positioned by default */
    top: 0px;
}

div.child{
    position: absolute;
    left: 10px;
    top: 10px;
}

Ответ 3

Я знаю, что опоздал, но надеюсь, что это поможет.

Ниже приведены значения для свойства position.

  • статическая
  • неподвижная
  • относительная
  • абсолютный

положение: статическое

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

#myelem {
    position : static;
}

позиция: фиксированная

Это установит положение элемента относительно окна браузера (область просмотра). Элемент с фиксированным позиционированием останется на своем месте даже при прокрутке страницы.

(Идеально, если вам нужна кнопка прокрутки вверх в правом нижнем углу страницы).

#myelem {
    position : fixed;
    bottom : 30px;
    right : 30px;
}

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

Чтобы разместить элемент в новом месте относительно его исходного положения.

#myelem {
    position : relative;
    left : 30px;
    top : 30px;
}

Приведенный выше CSS переместит элемент #myelem на 30 пикселей влево и на 30 пикселей от вершины его фактического местоположения.

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

Если мы хотим, чтобы элемент находился в точном месте на странице.

#myelem {
    position : absolute;
    top : 30px;
    left : 300px;
}

Приведенный выше CSS поместит элемент #myelem в положение 30px сверху и 300px слева на странице и будет прокручиваться вместе со страницей.

И наконец...

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

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

#container {
    position : relative;
}

#div-2 {
    position : absolute;
    top : 0;
    right : 0;
}

Absolute position of a child element w.r.t. a Relative positioned parent element.

На изображении выше видно, что элемент # div-2 расположен в верхнем правом углу внутри элемента #container.

GitHub: вы можете найти HTML-код приведенного выше изображения здесь и CSS здесь.

Надеюсь, этот учебник поможет.

Ответ 4

Абсолютное позиционирование позиционирует элемент относительно его ближайшего расположенного предка. Поэтому поставьте position: relative на контейнер, затем для дочерних элементов top и left будут относиться к верхнему левому краю контейнера, пока дочерние элементы имеют position: absolute. Дополнительная информация доступна в спецификация CSS 2.1.

Ответ 5

Если вам нужно сначала расположить элемент относительно содержащего его элемента, вам нужно добавить position: relative к элементу контейнера. Дочерний элемент, который вы хотите расположить относительно родительского элемента , должен иметь position: absolute. Способ, которым работает абсолютное позиционирование, заключается в том, что это делается относительно первого относительно (или абсолютно) позиционированного родительского элемента. В случае если нет относительно позиционированного родителя, элемент будет позиционирован относительно корневого элемента (непосредственно к элементу HTML).

Поэтому, если вы хотите расположить свой дочерний элемент в верхнем левом углу родительского контейнера, вы должны сделать это:

.parent {
  position: relative;
} 

.child {
  position: absolute;
  top: 0;
  left: 0;  
}

Вы получите большую пользу от прочтения этой статьи. Надеюсь это поможет!