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 DIVs
koloró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:
- Wiele przeglądarek (najlepiej bez zbytniej liczby włamań do przeglądarki)
- Działa w trybie dziwactwa
- Tak jasne / czyste, jak to możliwe, aby ułatwić dostosowywanie
- Wykonano bez JavaScript, jeśli to możliwe.
źródło
Odpowiedzi:
Masz rację, że pozycjonowanie CSS jest właściwą drogą. Oto szybki przegląd:
position: relative
uł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: absolute
który umieści element względem kontenera. Domyślnie kontener jest oknem przeglądarki, ale jeśli element nadrzędny ma na nim elementposition: relative
lub jestposition: absolute
ustawiony, będzie on działał jako element nadrzędny dla współrzędnych pozycjonowania dla jego elementów podrzędnych.Aby zademonstrować:
W tym przykładzie lewy górny róg
#box
to 100px w dół, a 50px w lewo od lewego górnego rogu#container
. Jeśli#container
nie zostałposition: relative
ustawiony, współrzędne#box
będą względem lewego górnego rogu portu widoku przeglądarki.źródło
Musisz jawnie ustawić pozycję kontenera nadrzędnego wraz z pozycją kontenera podrzędnego. Typowy sposób to zrobić:
źródło
Wiem, że się spóźniam, ale mam nadzieję, że to pomoże.
Poniżej podano wartości właściwości position.
pozycja: statyczna
To jest domyślne. Oznacza to, że element pojawi się w miejscu, w którym normalnie by się pojawił.
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).
pozycja: względna
Aby umieścić element w nowym miejscu w stosunku do jego pierwotnej pozycji.
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.
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.
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.
źródło
Pozycjonowanie absolutne pozycjonuje element względem najbliższego pozycjonowanego przodka. Więc umieść
position: relative
na pojemniku, a następnie na elementy potomne,top
ileft
bę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 .źródło
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ć:
Na pewno skorzystasz z lektury tego artykułu . Mam nadzieję że to pomoże!
źródło