Jak ustawić position:absolute względem dwóch różnych elementó

Jak ustawić position:absolute względem dwóch różnych elementó
0

Jak ustawić position:absolute względem dwóch różnych elementów ? Chodzi o to aby przesuwając nagłówek h1 o 0px od góry i 500px od lewej strony był on w rzeczywistości o tyle przesunięty z miejsca w którym miał być. Z tym nie ma problemu. Jednak jak zrobić później to samo z nagłówkiem drugim, tak aby ten nagłówek drugi był oddalony od swojej pozycji w której miał być o 0px od góry i 500px na lewo ?

Kopiuj
<!DOCTYPE html>
<html>
<head>
    <link href="StyleSheet1.css" rel="stylesheet" />
    <title></title>
	<meta charset="utf-8" />
</head>
<body>
    <h1>Pierwszy nagłówek</h1>
    <p class="przyklad">Przykładowy tekst 1</p>
    
    <div id="cos">
        <h2>Drugi nagłówek</h2>
        <p>Przykładowy tekst 2</p>
    </div>
</body>
</html>
Kopiuj
body {
    width: 750px;
    font-family: Arial, Verdana, sans-serif;
    color: #665544;
}

h1 {
    position: absolute;
    top: 0px;
    left: 500px;
}

h2 {
    position: absolute;
    top: 0px;
    left: 500px;
}

Chodzi o to, że ten drugi nagłówek przesuwa się względem elementu body, a ja chcę aby się przesunął względem tego diva. Chcę to zrobić za pomocą absolute żeby wiedzieć jak to działa.

R6
  • Rejestracja:około 9 lat
  • Ostatnio:ponad 8 lat
  • Postów:16
2

Hej. Dla diva o id="cos" dodaj pozycję - relative. Wtedy uzyskasz oczekiwany efekt.

Kopiuj
#cos {
  position: relative;
}

5!

0

ok dzięki, działa. Ale tak na prawdę nie wiem czemu to działa. Co to dało, że dla diva ustawiłem position na relative ?

SQ
  • Rejestracja:około 9 lat
  • Ostatnio:11 miesięcy
  • Lokalizacja:Warszawa
  • Postów:56
0

Domyślnie elementy mają position: static;
Jeśli ustawisz dla elementu position: absolute; to wtedy ustawia się on względem body a nie bezpośredniego rodzica.

Zobacz pozostały 1 komentarz
SQ
Względem body, jeżeli żaden z rodziców nie ma przypisanej wartości innej niż static. Tak przynajmniej gdzieś wyczytałem
ŁF
W takiej sytuacji to raczej względem rodzica wszystkich rodziców, a jest nim tag html. Ponieważ skoro wszystko jest static, to pozycja html = (0, 0) = pozycja body, więc na jedno, ale jeśli jakiś wariat ostyluje html, to już może być różnie.
SQ
ŁF
To sprawdź, nadaj html position:absolute albo relative (tutaj akurat to wszystko jedno) i jakiś offset, a potem któremuś dziecku nadaj position:relative i też jakiś offset. Ponieważ body jest static, to przesunięcie dziecka zostanie ustawione względem html.
SQ
No tak to zadziała, ale kto stosuje style na html? ;) I tak zazwyczaj body jest 100% na 100% więc na jedno wyjdzie. Ale technicznie rzecz biorąc przyznaję Ci oficjalnie rację.
0

A nie da się zrobić tak aby za pomocą absolute ustawić względnie innego elementu niż body ?

AR
  • Rejestracja:ponad 8 lat
  • Ostatnio:prawie 7 lat
  • Postów:4
0

Do tego właśnie służy position: relative. Nadajesz właściwość elementowi względem, którego chcesz ustawić.

0

Ale to absolute zawsze odwołuję się do elementu body ? Bo w dokumentacji jest napisane tak o absolute: The element is positioned relative to its first positioned (not static) ancestor element

Czyli, że odwołuje się do niestatycznego przodka elementu, więc nie wiem czy to do jakiego elementu się odwołuje można jakoś zmienić ?

AR
  • Rejestracja:ponad 8 lat
  • Ostatnio:prawie 7 lat
  • Postów:4
0

Odwołuje się do ostatniego elementu, który nie ma statycznej pozycji. Przecież jest jasno napisane. Jeżeli masz taki problem jak miał kolega, to rozwiązanie ma już w drugim poście.

edytowany 1x, ostatnio: arces
Kliknij, aby dodać treść...

Pomoc 1.18.8

Typografia

Edytor obsługuje składnie Markdown, w której pojedynczy akcent *kursywa* oraz _kursywa_ to pochylenie. Z kolei podwójny akcent **pogrubienie** oraz __pogrubienie__ to pogrubienie. Dodanie znaczników ~~strike~~ to przekreślenie.

Możesz dodać formatowanie komendami , , oraz .

Ponieważ dekoracja podkreślenia jest przeznaczona na linki, markdown nie zawiera specjalnej składni dla podkreślenia. Dlatego by dodać podkreślenie, użyj <u>underline</u>.

Komendy formatujące reagują na skróty klawiszowe: Ctrl+B, Ctrl+I, Ctrl+U oraz Ctrl+S.

Linki

By dodać link w edytorze użyj komendy lub użyj składni [title](link). URL umieszczony w linku lub nawet URL umieszczony bezpośrednio w tekście będzie aktywny i klikalny.

Jeżeli chcesz, możesz samodzielnie dodać link: <a href="link">title</a>.

Wewnętrzne odnośniki

Możesz umieścić odnośnik do wewnętrznej podstrony, używając następującej składni: [[Delphi/Kompendium]] lub [[Delphi/Kompendium|kliknij, aby przejść do kompendium]]. Odnośniki mogą prowadzić do Forum 4programmers.net lub np. do Kompendium.

Wspomnienia użytkowników

By wspomnieć użytkownika forum, wpisz w formularzu znak @. Zobaczysz okienko samouzupełniające nazwy użytkowników. Samouzupełnienie dobierze odpowiedni format wspomnienia, zależnie od tego czy w nazwie użytkownika znajduje się spacja.

Znaczniki HTML

Dozwolone jest używanie niektórych znaczników HTML: <a>, <b>, <i>, <kbd>, <del>, <strong>, <dfn>, <pre>, <blockquote>, <hr/>, <sub>, <sup> oraz <img/>.

Skróty klawiszowe

Dodaj kombinację klawiszy komendą notacji klawiszy lub skrótem klawiszowym Alt+K.

Reprezentuj kombinacje klawiszowe używając taga <kbd>. Oddziel od siebie klawisze znakiem plus, np <kbd>Alt+Tab</kbd>.

Indeks górny oraz dolny

Przykład: wpisując H<sub>2</sub>O i m<sup>2</sup> otrzymasz: H2O i m2.

Składnia Tex

By precyzyjnie wyrazić działanie matematyczne, użyj składni Tex.

<tex>arcctg(x) = argtan(\frac{1}{x}) = arcsin(\frac{1}{\sqrt{1+x^2}})</tex>

Kod źródłowy

Krótkie fragmenty kodu

Wszelkie jednolinijkowe instrukcje języka programowania powinny być zawarte pomiędzy obróconymi apostrofami: `kod instrukcji` lub ``console.log(`string`);``.

Kod wielolinijkowy

Dodaj fragment kodu komendą . Fragmenty kodu zajmujące całą lub więcej linijek powinny być umieszczone w wielolinijkowym fragmencie kodu. Znaczniki ``` lub ~~~ umożliwiają kolorowanie różnych języków programowania. Możemy nadać nazwę języka programowania używając auto-uzupełnienia, kod został pokolorowany używając konkretnych ustawień kolorowania składni:

```javascript
document.write('Hello World');
```

Możesz zaznaczyć również już wklejony kod w edytorze, i użyć komendy  by zamienić go w kod. Użyj kombinacji Ctrl+`, by dodać fragment kodu bez oznaczników języka.

Tabelki

Dodaj przykładową tabelkę używając komendy . Przykładowa tabelka składa się z dwóch kolumn, nagłówka i jednego wiersza.

Wygeneruj tabelkę na podstawie szablonu. Oddziel komórki separatorem ; lub |, a następnie zaznacz szablonu.

nazwisko;dziedzina;odkrycie
Pitagoras;mathematics;Pythagorean Theorem
Albert Einstein;physics;General Relativity
Marie Curie, Pierre Curie;chemistry;Radium, Polonium

Użyj komendy by zamienić zaznaczony szablon na tabelkę Markdown.

Lista uporządkowana i nieuporządkowana

Możliwe jest tworzenie listy numerowanych oraz wypunktowanych. Wystarczy, że pierwszym znakiem linii będzie * lub - dla listy nieuporządkowanej oraz 1. dla listy uporządkowanej.

Użyj komendy by dodać listę uporządkowaną.

1. Lista numerowana
2. Lista numerowana

Użyj komendy by dodać listę nieuporządkowaną.

* Lista wypunktowana
* Lista wypunktowana
** Lista wypunktowana (drugi poziom)

Składnia Markdown

Edytor obsługuje składnię Markdown, która składa się ze znaków specjalnych. Dostępne komendy, jak formatowanie , dodanie tabelki lub fragmentu kodu są w pewnym sensie świadome otaczającej jej składni, i postarają się unikać uszkodzenia jej.

Dla przykładu, używając tylko dostępnych komend, nie możemy dodać formatowania pogrubienia do kodu wielolinijkowego, albo dodać listy do tabelki - mogłoby to doprowadzić do uszkodzenia składni.

W pewnych odosobnionych przypadkach brak nowej linii przed elementami markdown również mógłby uszkodzić składnie, dlatego edytor dodaje brakujące nowe linie. Dla przykładu, dodanie formatowania pochylenia zaraz po tabelce, mogłoby zostać błędne zinterpretowane, więc edytor doda oddzielającą nową linię pomiędzy tabelką, a pochyleniem.

Skróty klawiszowe

Skróty formatujące, kiedy w edytorze znajduje się pojedynczy kursor, wstawiają sformatowany tekst przykładowy. Jeśli w edytorze znajduje się zaznaczenie (słowo, linijka, paragraf), wtedy zaznaczenie zostaje sformatowane.

  • Ctrl+B - dodaj pogrubienie lub pogrub zaznaczenie
  • Ctrl+I - dodaj pochylenie lub pochyl zaznaczenie
  • Ctrl+U - dodaj podkreślenie lub podkreśl zaznaczenie
  • Ctrl+S - dodaj przekreślenie lub przekreśl zaznaczenie

Notacja Klawiszy

  • Alt+K - dodaj notację klawiszy

Fragment kodu bez oznacznika

  • Alt+C - dodaj pusty fragment kodu

Skróty operujące na kodzie i linijkach:

  • Alt+L - zaznaczenie całej linii
  • Alt+, Alt+ - przeniesienie linijki w której znajduje się kursor w górę/dół.
  • Tab/⌘+] - dodaj wcięcie (wcięcie w prawo)
  • Shit+Tab/⌘+[ - usunięcie wcięcia (wycięcie w lewo)

Dodawanie postów:

  • Ctrl+Enter - dodaj post
  • ⌘+Enter - dodaj post (MacOS)