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

172

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

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

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

  1. Cross-browser (ideally without too many browser hacks)
  2. Runs in Quirks mode
  3. As clear/clean as possible, to facilitate customizations
  4. Done without JavaScript if possible.
Почему он должен работать в режиме Quirks? Jonathan Arkell
Вы должны сделать это в HTML? Вы могли бы использовать диаграммы Google вместо этого?code.google.com/apis/chart/#bar_charts Sam Hasler
Поскольку сайт, который я собираюсь добавить, будет запущен в режиме Quirks и не изменится в любое время в этом десятилетии. :-П Craig Walker

Ваш Ответ

5   ответов
16

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

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

div.child{
    position: absolute;
    left: 10px;
    top: 10px;
}
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded Craig Walker
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
3

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

11

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

static fixed relative absolute

position : static

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

#myelem {
    position : static;
}

position : fixed

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

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

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

position : relative

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

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

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

position : absolute

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

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

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

И наконец...

position relative + absolute

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

#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Вот.

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

Error: User Rate Limit Exceeded
359

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

Однако вы, скорее всего, заинтересованы в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 будет относительно верхнего левого угла порта просмотра браузера.

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

Error: User Rate Limit Exceededcss-tricks.com/absolute-positioning-inside-relative-positioning
0

о элемента, вам нужно добавитьposition: relative to the container element, Дочерний элемент, который вы хотите позиционировать относительно родительскогоhas to have position: absolute, Способ, которым работает абсолютное позиционирование, заключается в том, чтоit is done relative to the first relatively (or absolutely) positioned parent element, В случае, если естьno relatively позиционируется родительский элемент, элемент будет расположен относительноroot element (непосредственно к элементу HTML).

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

.parent {
  position: relative;
} 

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

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

Похожие вопросы