Tajemnica bezwzględnego pozycjonowania CSS

Rozważ poniższą stronę. Numer <img> jest umieszczony absolutnie w stosunku do rodzica, a kiedy ładuję tę stronę w przeglądarce Safari lub Firefox, <img> pojawia się w prawym górnym rogu, zgodnie z oczekiwaniami (patrz pierwszy obraz). Jednakże, gdy ramka zostanie usunięta z <div>, na przykład, ustawiając border-width: 0, <img> pozycjonuje się absolutnie w stosunku do znacznika <p>, jego rodzeństwo! Zobacz zdjęcie nr 2. Dlaczego to? Jaką różnicę powinna obramować?Tajemnica bezwzględnego pozycjonowania CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<style type="text/css"> 
body { 
    margin: 0; 
} 
div { 
    position: relative; 
    left: 0; 
    top: 0; 
    border: 1px solid red; 
} 
img { 
    position: absolute; 
    right: 0; 
    top: 0; 
} 
p { 
    margin: 20px; 
} 
</style> 

</head> 
<body> 
    <div> 
     <img src="content/en/flag.png" /> 
     <p>This is a test</p> 
    </div> 
</body> 
</html>

absolutely relative to div absolutely relative to p

Źródło

2013-07-21 Steveo

spróbuj użyć css-reset, a następnie sprawdź stronę. http://meyerweb.com/eric/tools/css/reset/ – Alon

Twój obraz jest zawsze w prawym górnym rogu. Ma to związek z collapsing margins.

Spróbuj zrobić to z kolorem tła. Zobaczysz, że Twój div odsuwa się od wierzchołka o kilka pikseli. Jeśli usuniesz margines p, wszystko będzie w porządku, lub ustawienie p jako elementu wstawianego lub przestawienie go, lub nawet ustawienie przelewu na auto, lub scroll na rodzica. Innym sposobem na pokonanie zawalonego marginesu jest dodanie granicy do elementu kontenera. Naprawdę rozwiązałeś to z tą granicą.

Ale obraz jest zawsze tam, gdzie powinien.

Źródło

2013-07-21 09:32:14 pzin

Możesz również ustawić opcję "dopełnienie-góry: 1px;" do elementu nadrzędnego: http://strona_wydarzenia.com/pytania/1762539/margin-on-child -element-moves-parent-element –

Dzięki, nie wiedziałem o zwijaniu marginesów. – Steveo

Jej naprawdę dziwne rzeczywiście, ale pozwól mi spróbować wyjaśnić to rzeczywiście elementy nie są unosić i używasz margines na p tagu których div bierze prawidłowo, gdy ma granicę i nie udało się wdrożyć go, gdy jej usunąć, jeżeli nieruchomość dodaj pływak niż div zyska także jego wysokość

dodać overflow:auto; do dział będzie rozwiązać problem

Źródło

2013-07-21 02:44:10 Hushme

Tajemnica bezwzględnego pozycjonowania CSS

Odpowiedz

Powiązane problemy