Position absolue à l'intérieur de la position absolue: largeur du bloc parent positionné en absolu

Voici mon code ... position absolue à l'intérieur de la position absolue ... Quand je donne la div position: relative; il s'étend sur l'étiquette du corps comme si elle était au niveau du bloc, mais quand est donné position: absolute;, il ressemble à un élément de niveau en ligne ... Je ne comprends pas pourquoi?Position absolue à l'intérieur de la position absolue: largeur du bloc parent positionné en absolu

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>

Source

2017-06-22 Norayr Ghukasyan

Quelle est la sortie attendue? –

_ "Je ne comprends pas pourquoi?" _ - parce que: https://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width – CBroe

Je ne comprends tout simplement pas le problème ...Je sais que les éléments absolument positionnés sont automatiquement affichés display: block, donc la position absloute à l'intérieur de la position absolue rend le div parent inline ... pourquoi ??? –

position absolue shrinkswraps l'élément et le rendent pas prendre place dans le document flux normal.

Source

2017-06-22 09:14:13 itacode

Merci ...))) –

Une recherche rapide, simple m'a fait ces explications possibles:

-tours css dit le texte suivant (absolute relative fixed positioning how do they differ):

relative. Ce type de positionnement est probablement le plus déroutant et le plus mal utilisé. Ce que cela signifie vraiment est "par rapport à lui-même". Si vous définissez la position: relative; sur un élément mais aucun autre attribut de positionnement (haut, gauche, bas ou droite), cela n'aura aucun effet sur son positionnement, il sera exactement comme si vous le laissiez en position: statique; Mais si vous lui donnez un autre attribut de positionnement, disons, top: 10px ;, il déplacera sa position de 10 pixels par rapport à ce qu'elle serait normalement. Je suis sûr que vous pouvez imaginer, la possibilité de déplacer un élément en fonction de sa position normale est très utile. (...) Il y a deux autres choses qui se produisent lorsque vous définissez la position: relative; sur un élément que vous devriez connaître. Le premier est qu'il introduit la possibilité d'utiliser z-index sur cet élément, qui ne fonctionne pas vraiment avec des éléments statiquement positionnés. Même si vous ne définissez pas de valeur d'index z, cet élément apparaîtra désormais au-dessus de tout autre élément positionné statiquement. Vous ne pouvez pas le combattre en définissant une valeur d'index z plus élevée sur un élément positionné statiquement. L'autre chose qui arrive est qu'elle limite la portée des éléments enfants positionnés de manière absolue. Tout élément qui est un enfant de l'élément relativement positionné peut être absolument positionné dans ce bloc. Cela soulève de puissantes opportunités dont je parle here.

Absolu. C'est un type de positionnement très puissant qui vous permet de placer littéralement n'importe quel élément de la page exactement où vous le souhaitez. Vous utilisez les attributs de positionnement en haut, à gauche, en bas. et droit de définir l'emplacement. Rappelez-vous que ces valeurs seront relatives à l'élément parent suivant avec un positionnement relatif (ou absolu). S'il n'y a pas de parent, il retournera par défaut à l'élément lui-même, ce qui signifie qu'il sera placé relativement à la page elle-même. Le compromis (et le plus important à retenir) sur le positionnement absolu est que ces éléments sont supprimés du flux d'éléments sur la page. Un élément avec ce type de positionnement n'est pas affecté par d'autres éléments et n'affecte pas les autres éléments. C'est une chose sérieuse à considérer chaque fois que vous utilisez le positionnement absolu. Son utilisation abusive ou inappropriée peut limiter la flexibilité de votre site.

Lorsque l'on regarde absolute positioning inside relative positioning, vous verrez l'explication exacte des raisons pour lesquelles le comportement/positionnement de la durée change lorsque l'élément parent (dans votre cas) obtient position: relative.

Espérons que cela vous aide à clarifier le comportement.

Source

2017-06-22 09:36:30

Merci Kevin –

Position absolue à l'intérieur de la position absolue: largeur du bloc parent positionné en absolu

Répondre

Questions connexes