Я пытаюсь создать горизонтальную 100% -ную гистограмму, используя HTML и CSS. Я хотел бы создать бары с использованием DIVs
цветов фона и ширины в процентах в зависимости от значений, которые я хочу построить на графике. Я также хочу иметь линии сетки для обозначения произвольной позиции на графике.
В своих экспериментах я уже получил горизонтальное расположение столбцов, назначив свойство CSS float: left
. Тем не менее, я бы хотел этого избежать, так как он действительно запутывает макет. Кроме того, линии сетки, кажется, не очень хорошо работают, когда бары плавают.
Я думаю, что CSS-позиционирование должно справиться с этим, но я пока не знаю, как это сделать. Я хочу иметь возможность указать положение нескольких элементов относительно верхнего левого угла их контейнера. Я регулярно сталкиваюсь с такого рода проблемами (даже вне этого конкретного графического проекта), поэтому мне нужен метод, который:
- Кросс-браузер (в идеале, без слишком большого количества взломов браузера)
- Работает в режиме Quirks
- Как можно более ясно / чисто, чтобы облегчить настройку
- Сделано без JavaScript, если это возможно.
источник
Ответы:
Вы правы, что позиционирование CSS - это путь. Вот быстрый бег вниз:
position: relative
расположит элемент относительно себя. Другими словами, элементы размещаются в нормальном потоке, затем они удаляются из нормального потока и смещаются на любые значения, которые вы указали (верхний, правый, нижний, левый). Важно отметить, что, поскольку он удален из потока, другие элементы вокруг него не будут перемещаться вместе с ним (вместо этого используйте отрицательные поля, если вы хотите такое поведение).Тем не менее, вас, скорее всего, интересует
position: absolute
, какой элемент будет позиционироваться относительно контейнера. По умолчанию контейнер является окном браузера, но если родительский элемент либо имеет,position: relative
либоposition: absolute
установил его, то он будет выступать в качестве родительского элемента для определения координат своих дочерних элементов .Демонстрировать:
В этом примере верхний левый угол
#box
будет на 100px вниз и на 50px слева от верхнего левого угла#container
. Если#container
неposition: relative
установить, координаты#box
будут относительно верхнего левого угла порта просмотра браузера.источник
Вы должны явно установить позицию родительского контейнера вместе с позицией дочернего контейнера. Типичный способ сделать это что-то вроде этого:
источник
Я знаю, что опоздал, но надеюсь, что это поможет.
Ниже приведены значения для свойства position.
положение: статическое
Это по умолчанию. Это означает, что элемент будет находиться в положении, в котором он обычно находится.
положение: фиксированное
Это установит положение элемента относительно окна браузера (область просмотра). Элемент с фиксированным положением останется на своем месте даже при прокрутке страницы.
(Идеально, если вам нужна кнопка прокрутки вверх в правом нижнем углу страницы).
положение: родственник
Поместить элемент в новом месте относительно его исходного положения.
Вышеупомянутый CSS переместит элемент #myelem на 30px влево и на 30px от вершины его фактического местоположения.
положение: абсолют
Если мы хотим, чтобы элемент был расположен в точном месте на странице.
Вышеупомянутый CSS будет позиционировать элемент #myelem в позиции 30px сверху и 300px слева на странице, и он будет прокручиваться вместе со страницей.
И наконец...
положение относительное + абсолютное
Мы можем установить свойство position родительского элемента на относительное, а затем установить свойство position дочернего элемента на абсолютное . Таким образом, мы можем расположить ребенка относительно родителя в абсолютной позиции.
На изображении выше видно, что элемент # div-2 расположен в верхнем правом углу внутри элемента #container .
GitHub: Вы можете найти HTML выше изображения здесь и CSS здесь .
Надеюсь, этот урок поможет.
источник
Абсолютное позиционирование позиционирует элемент относительно ближайшего позиционированного предка. Поэтому поместите
position: relative
контейнер, затем для дочерних элементов,top
иleft
будет относительно верхнего левого угла контейнера, если есть дочерние элементыposition: absolute
. Более подробная информация доступна в спецификации CSS 2.1 .источник
Если вам нужно сначала расположить элемент относительно содержащего его элемента, вам нужно добавить его
position: relative
к элементу контейнера . Дочерний элемент, который вы хотите расположить относительно родительского, должен иметьposition: absolute
. Способ, которым работает абсолютное позиционирование, состоит в том, что это делается относительно первого относительно (или абсолютно) позиционированного родительского элемента . В случае, если нет относительно позиционированного родителя, элемент будет позиционироваться относительно корневого элемента (непосредственно к элементу HTML).Поэтому, если вы хотите расположить ваш дочерний элемент в верхнем левом углу родительского контейнера, вы должны сделать это:
Вы получите большую пользу от прочтения этой статьи . Надеюсь это поможет!
источник