Ustaw element względem jego pojemnika

187

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.
Craig Walker
źródło
1
Czy musisz to zrobić w HTML? czy zamiast tego możesz użyć wykresów Google? code.google.com/apis/chart/#bar_charts
Sam Hasler

Odpowiedzi:

379

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.

Bryan M.
źródło
8
Ta strona pokazuje ładne ilustracje tego zjawiska: css-tricks.com/absolute-positioning-inside-relative-positioning
DarenW
20

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;
}
Stephen Deken
źródło
2
Nie trzeba podawać górnych ani lewych wartości właściwości dla względnie pozycjonowanych elementów, jeśli są one zerowe.
Jim
Prawda dla istniejących przeglądarek, ale nie zdefiniowana w specyfikacji.
Stephen Deken,
Jest to z pewnością zdefiniowane w specyfikacji. Przeczytaj rozdział 9.4.3 i sprawdź wartości początkowe właściwości.
Jim
9.4.3 mówi, że początkowe wartości dla lewego i górnego są „auto”. Definicja tego, co dzieje się z wartościami „auto”, jest dość skomplikowana i nigdy nie byłem w stanie ich w pełni zrozumieć. Uwierzę ci na słowo, jeśli powiesz, że kończy się na zero.
Stephen Deken,
14

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;
}

Bezwzględna pozycja elementu potomnego wrt Względnie pozycjonowany element macierzysty.

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.

yusufshakeel
źródło
3

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 .

Jim
źródło
0

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!

Nesha Zoric
źródło