Tu je môj kód ... absolútna pozícia v absolútnej pozícii ... Keď dám div position: relative; to sa tiahne cez značku tela, ako je blok úrovni, ale keď je daný position: absolute; , vyzerá to ako inline level element ... Nechápem prečo?
div {
background: red;
margin: 0 0 0 50px;
font-size: 2em;
position: absolute;
}
span {
background: green;
color: #fff;
height: 100px;
position: absolute;
left: 0;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ssss</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>Begining <span>NORO</span> some text text text</div>
</body>
</html>odpovede:
0 pre odpoveď č. 1Poloha absolútne zmršťuje obal a robí z neho priestor v normálnom prietoku dokumentu.
0 pre odpoveď č. 2
Rýchle a jednoduché vyhľadávanie mi poskytlo tieto možné vysvetlenia:
css-triky hovorí nasledovné (absolútne relatívne pevné umiestnenie, ako sa líšia):
relatívna, Tento typ umiestnenia je pravdepodobne najviacmätúce a zneužité. Čo to vlastne znamená, je "relatívne k sebe". Ak nastavíte polohu: relatívna; na elemente, ale žiadne iné atribúty na určovanie polohy (hore, vľavo, dole alebo vpravo), nebude mať žiadny vplyv na jeho umiestnenie, bude to presne tak, ako by to bolo, keby ste ho ponechali ako pozíciu: statickú; dajte mu nejaký iný atribút určovania polohy, povedzme, top: 10px ;, posunie svoju pozíciu o 10 pixelov z miesta, kde by normálne bol. je veľmi užitočná. (...) Existujú dve ďalšie veci, ktoré nastanú, keď nastavíte pozíciu: relatívna; na elemente, o ktorom by ste si mali byť vedomí. Jedným z nich je, že zavádza schopnosť používať z-index na tomto elemente, ktorý naozaj nefunguje so staticky umiestnenými prvkami. Aj keď nezadáte hodnotu z-indexu, tento prvok sa teraz zobrazí na vrchu akéhokoľvek iného staticky umiestnený prvok. Nemôžete s ním bojovať nastavením vyššej hodnoty indexu z na staticky umiestnenom prvku. Ďalšia vec, ktorá sa stane, je obmedzenie rozsahu absolútne umiestnených detských elementov. Akýkoľvek prvok, ktorý je dieťaťom relatívne umiestneného prvku, môže byť absolútne v tomto bloku, čo prináša určité silné príležitosti, o ktorých hovorím tu.
absolútny, Jedná sa o veľmi silný typ polohovaniaTo vám umožní doslova umiestniť ľubovoľný prvok stránky presne tam, kde ho chcete. Používate atribúty polohovania hore, vľavo, dole. a právo nastaviť polohu. Pamätajte, že tieto hodnoty budú relatívne k nasledujúcemu nadradenému prvku s relatívnym (alebo absolútnym) umiestnením. Ak takýto rodič nie je, predvolí sa až na samotný prvok, čo znamená, že bude umiestnený relatívne k samotnej stránke. Kompromis (a najdôležitejšia vec na zapamätanie) o absolútnom umiestnení je, že tieto prvky sú odstránené z toku prvkov na stránke. Prvok s týmto typom polohovania nie je ovplyvnený inými prvkami a nemá vplyv na iné prvky. Toto je vážna vec, ktorá sa musí zvážiť pri každom použití absolútnej polohy.
Pri pohľade na absolútne polohovanie vnútri relatívnej polohy, uvidíte presné vysvetlenie, prečo sa správanie / umiestnenie rozpätia zmení, keď sa nadradený prvok (vo vašom prípade) dostane position: relative.
Dúfam, že vám to pomôže pri objasňovaní správania.