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

Question

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

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

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

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

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

5 168

html css positioning

5 ответов:

вы должны явно задать положение родительского контейнера вместе с положением дочернего контейнера. Типичный способ сделать это, что-то вроде этого:
div.parent{
    position: relative;
    left: 0px;  /* stick it wherever it was positioned by default */
    top: 0px;
}

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

16

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

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

статический

основные

относительные

абсолютное

позиция : статические

это значение по умолчанию. Это означает, что элемент будет происходить в положении, которое он обычно будет.
#myelem {
    position : static;
}
установки : фиксированный

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

(идеально, если вы хотите прокрутить до верхней кнопки в правом нижнем углу страницы).
#myelem {
    position : fixed;
    bottom : 30px;
    right : 30px;
}
позиция : относительная

для размещения элемента в новом месте относительно его исходного положения.
#myelem {
    position : relative;
    left : 30px;
    top : 30px;
}
приведенный выше CSS переместит элемент #myelem 30px влево и 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;
}
мы можем видеть на приведенном выше изображении #div-2 элемент расположен в правом верхнем углу внутри #контейнер элемент.

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

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

9

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

3

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

поэтому, если вы хотите разместить свой дочерний элемент в левом верхнем углу родительского контейнера, вы должны сделать это:
.parent {
  position: relative;
} 

.child {
  position: absolute;
  top: 0;
  left: 0;  
}
вы получите большую пользу от чтения в этой статье. Надеюсь, это поможет!

0

Bryan M. · Accepted Answer · 2014-09-23 20:44:30

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

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

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

продемонстрировать:
<div id="container">
   <div id="box"> </div>
</div>
#container {
  position: relative;
}

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

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