Расположите элемент относительно его контейнера


187

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

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

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

  1. Кросс-браузер (в идеале, без слишком большого количества взломов браузера)
  2. Работает в режиме Quirks
  3. Как можно более ясно / чисто, чтобы облегчить настройку
  4. Сделано без JavaScript, если это возможно.

1
Вы должны сделать это в HTML? Вы могли бы использовать диаграммы Google вместо этого? code.google.com/apis/chart/#bar_charts
Сэм Хаслер,

Ответы:


379

Вы правы, что позиционирование 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>

В этом примере верхний левый угол #boxбудет на 100px вниз и на 50px слева от верхнего левого угла #container. Если #containerне position: relativeустановить, координаты #boxбудут относительно верхнего левого угла порта просмотра браузера.


8
На этой странице показаны хорошие иллюстрации этого явления: css-tricks.com/absolute-positioning-inside-relative-positioning
DarenW

20

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

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

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

2
Вам не нужно указывать верхнее или левое значение свойства для относительно позиционированных элементов, если они равны нулю.
Джим

Верно для существующих браузеров, но не определено в спецификации.
Стивен Декен

Это определенно определено в спецификации. Прочтите раздел 9.4.3 и проверьте начальные значения свойств.
Джим

9.4.3 говорит, что начальные значения для левого и верхнего - «auto». Определение того, что происходит с «автоматическими» значениями, довольно запутанно, и я никогда не мог их полностью понять. Я поверим твоему слову, если ты скажешь, что в итоге все равно нулю.
Стивен Декен

14

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

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

  • статический
  • фиксированный
  • родственник
  • абсолютный

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

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

#myelem {
    position : static;
}

положение: фиксированное

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

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

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

положение: родственник

Поместить элемент в новом месте относительно его исходного положения.

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

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

положение: абсолют

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

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

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

И наконец...

положение относительное + абсолютное

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

#container {
    position : relative;
}

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

Абсолютная позиция дочернего элемента относительно относительного позиционного родительского элемента.

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

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

Надеюсь, этот урок поможет.


3

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


0

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

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

.parent {
  position: relative;
} 

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

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.