Розташуйте елемент відносно його контейнера

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

У моєму експерименті я вже отримав бруски для горизонтального укладання, присвоївши властивість CSS float: left. Однак я хотів би цього уникнути, оскільки це, здається, псується з компонуванням заплутаними способами. Крім того, лінії сітки, здається, не дуже добре працюють, коли планки плавають.

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

1. Перехресний веб-браузер (в ідеалі без занадто багато хакерів у браузері)
2. Працює в режимі Quirks
3. Як можна чіткіше чистіше, щоб полегшити налаштування
4. Виконано без JavaScript, якщо можливо.

Ви праві, що позиціонування 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було б відносно верхнього лівого кута порту перегляду браузера.

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

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

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

Я знаю, що я спізнююсь, але сподіваюся, що це допомагає.

Далі наведені значення властивості позиції.

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

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

Це за замовчуванням. Це означає, що елемент відбуватиметься в такому положенні, як воно було б нормально.

#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 зліва на сторінці, і він буде прокручуватися зі сторінки.

І, нарешті...

позиція відносна + абсолютна

Ми можемо встановити властивість позиції батьківського елемента на відносне, а потім встановити властивість позиції дочірнього елемента на абсолютне . Таким чином ми можемо позиціонувати дитину відносно батька в абсолютному положенні.

#container {
    position : relative;
}

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

На наведеному вище зображенні ми бачимо, що елемент # div-2 розміщений у правому верхньому куті всередині елемента #container .

GitHub: Ви можете знайти HTML в зображенні тут і CSS тут .

Сподіваюся, цей підручник допомагає.

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

Якщо вам потрібно розташувати елемент відносно елемента, що містить його, спочатку потрібно додати position: relative його до елемента контейнера . Дочірній елемент, який ви хочете розташувати відносно батьківського , повинен мати position: absolute . Абсолютне позиціонування працює так, що це робиться відносно першого відносно (або абсолютно) розташованого батьківського елемента . Якщо немає відносно розташованого батька, елемент буде розташований відносно кореневого елемента (безпосередньо до елемента HTML).

Отже, якщо ви хочете розташувати дочірній елемент у верхньому лівому куті батьківського контейнера, слід зробити це:

.parent {
  position: relative;
} 

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

Вам буде дуже корисно, прочитавши цю статтю . Сподіваюся, це допомагає!