Ustaw element względem jego pojemnika

Próbuję utworzyć poziomy wykres słupkowy w 100% ułożony w stos przy użyciu HTML i CSS. Chciałbym utworzyć paski przy użyciu DIVskolorów tła i szerokości procentowych w zależności od wartości, które chcę wykreślić. Chcę też mieć linie siatki, aby zaznaczyć dowolną pozycję na wykresie.

W moich eksperymentach już ustawiłem pręty do układania w stosy poprzez przypisanie właściwości CSS float: left. Chciałbym jednak tego uniknąć, ponieważ wydaje się, że naprawdę psuje układ w mylący sposób. Ponadto linie siatki nie wydają się działać zbyt dobrze, gdy pręty są pływające.

Myślę, że pozycjonowanie CSS powinno być w stanie sobie z tym poradzić, ale nie wiem jeszcze, jak to zrobić. Chcę móc określić położenie kilku elementów względem lewego górnego rogu ich kontenera. Często spotykam się z tego rodzaju problemami (nawet poza tym konkretnym projektem graficznym), więc chciałbym metodę, która:

1. Wiele przeglądarek (najlepiej bez zbytniej liczby włamań do przeglądarki)
2. Działa w trybie dziwactwa
3. Tak jasne / czyste, jak to możliwe, aby ułatwić dostosowywanie
4. Wykonano bez JavaScript, jeśli to możliwe.

Masz rację, że pozycjonowanie CSS jest właściwą drogą. Oto szybki przegląd:

position: relativeułoży element względem siebie. Innymi słowy, elementy są układane w normalnym przepływie, a następnie są usuwane z normalnego przepływu i równoważone przez dowolne określone wartości (góra, prawo, dół, lewa strona). Ważne jest, aby pamiętać, że ponieważ jest usuwany z przepływu, inne elementy wokół niego nie będą się z nim przesuwać (zamiast tego użyj marginesów ujemnych, jeśli chcesz tego zachowania).

Jednak najprawdopodobniej jesteś zainteresowany tym, position: absolutektóry umieści element względem kontenera. Domyślnie kontener jest oknem przeglądarki, ale jeśli element nadrzędny ma na nim element position: relativelub jest position: absoluteustawiony, będzie on działał jako element nadrzędny dla współrzędnych pozycjonowania dla jego elementów podrzędnych.

Aby zademonstrować:

#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>

W tym przykładzie lewy górny róg #boxto 100px w dół, a 50px w lewo od lewego górnego rogu #container. Jeśli #containernie został position: relativeustawiony, współrzędne #boxbędą względem lewego górnego rogu portu widoku przeglądarki.

Musisz jawnie ustawić pozycję kontenera nadrzędnego wraz z pozycją kontenera podrzędnego. Typowy sposób to zrobić:

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

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

Wiem, że się spóźniam, ale mam nadzieję, że to pomoże.

Poniżej podano wartości właściwości position.

• statyczny
• naprawiony
• krewny
• absolutny

pozycja: statyczna

To jest domyślne. Oznacza to, że element pojawi się w miejscu, w którym normalnie by się pojawił.

#myelem {
    position : static;
}

pozycja: stała

Spowoduje to ustawienie pozycji elementu względem okna przeglądarki (rzutnia). Stały element pozycjonowany pozostanie na swoim miejscu nawet podczas przewijania strony.

(Idealne, jeśli chcesz przewinąć do góry w prawym dolnym rogu strony).

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

pozycja: względna

Aby umieścić element w nowym miejscu w stosunku do jego pierwotnej pozycji.

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

Powyższy CSS przesunie element #myelem o 30 pikseli w lewo i 30 pikseli od góry jego rzeczywistej lokalizacji.

pozycja: absolutna

Jeśli chcemy, aby element został umieszczony w dokładnej pozycji na stronie.

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

Powyższy CSS umieści element #myelem w pozycji 30px od góry i 300px od lewej na stronie i będzie przewijał się ze stroną.

I w końcu...

pozycja względna + absolutna

Możemy ustawić właściwość position elementu nadrzędnego na względną, a następnie ustawić właściwość position elementu podrzędnego na wartość bezwzględną . W ten sposób możemy ustawić dziecko względem rodzica w pozycji absolutnej.

#container {
    position : relative;
}

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

Na powyższym obrazku widać element # div-2 umieszczony w prawym górnym rogu wewnątrz elementu #container .

GitHub: możesz znaleźć HTML powyższego obrazu tutaj i CSS tutaj .

Mam nadzieję, że ten samouczek pomoże.

Pozycjonowanie absolutne pozycjonuje element względem najbliższego pozycjonowanego przodka. Więc umieść position: relativena pojemniku, a następnie na elementy potomne, topi leftbędzie względem względnego lewego górnego rogu pojemnika, o ile elementy potomne mają position: absolute. Więcej informacji jest dostępnych w specyfikacji CSS 2.1 .

Jeśli musisz najpierw ustawić element względem elementu zawierającego, musisz dodać position: relative do elementu kontenera . Element potomny, który chcesz ustawić względem rodzica, musi mieć position: absolute . Metoda absolutnego pozycjonowania polega na tym, że jest ona wykonywana względem pierwszego względnie (lub absolutnie) pozycjonowanego elementu macierzystego . W przypadku, gdy nie ma względnie pozycjonowanego elementu nadrzędnego, element zostanie umieszczony względem elementu głównego (bezpośrednio do elementu HTML).

Jeśli więc chcesz umieścić element podrzędny w lewym górnym rogu kontenera nadrzędnego, powinieneś to zrobić:

.parent {
  position: relative;
} 

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

Na pewno skorzystasz z lektury tego artykułu . Mam nadzieję że to pomoże!