GOOGLE ADS

dimanche 1 mai 2022

Positionnement du flux de documents absolu et permanent

Existe-t-il un moyen en CSS de positionner un élément quelque chose comme absolu (par rapport à l'élément parent), par exemple au bas de son élément parent, mais qu'il reste toujours dans le flux de documents ?

Par exemple. qu'un élément, positionné par rapport au-dessus de l'élément, en prenant plus de hauteur, pousse l'élément "absolu" vers le bas tandis que la hauteur de l'élément-conteneur augmente également au moment où l'élément relatif "toucherait" l'absolu mais d'un autre côté le " la position absolue" des éléments et la hauteur des éléments conteneurs ne changeront pas s'il n'y a pas de "touche" ?

Ou est-ce juste une tâche impossible et ne peut être fait qu'avec javascript?


Solution du problème

Vous pouvez positionner un div absolu par rapport au parent si vous forcez

position: relative;

sur la div mère. Sinon, l'absolu se positionnera par rapport au document.

<div style="position:relative;">
<div style="position:absolute; top:10px; right:10px;">
................
</div>
</div>

Cela n'aura pas l'effet d'étirement que vous souhaitez, mais si vous voulez le type de comportement de bloc que vous décrivez, quel est le problème avec le flottement et l'application de marges ?

<div style="position:relative;">
<div style="float: right; margin-top:10px; margin-right:10px;">
................
</div>
<div>text</div>
</div>

Tant que vous effacez correctement la div parente, le contenu flottant ou le contenu normal de la div ci-dessus peut déterminer la hauteur de l'élément parent.

Si vous avez également besoin d'un alignement vers le bas, vous pouvez regarder dans display: table-cell en option (ne fonctionne pas sur IE7)

Aucun commentaire:

Enregistrer un commentaire

Comment utiliseriez-vous .reduce() sur des arguments au lieu d'un tableau ou d'un objet spécifique&nbsp;?

Je veux définir une fonction.flatten qui aplatit plusieurs éléments en un seul tableau. Je sais que ce qui suit n'est pas possible, mais...