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 ?

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

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.

2

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

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

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.

0

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

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ć ?

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.

1 użytkowników online, w tym zalogowanych: 0, gości: 1