IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

top, offsetTop et getBoundingClientRect().top


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre Expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 910
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 910
    Par défaut top, offsetTop et getBoundingClientRect().top
    Salut,

    J'ouvre ce fil car aimerais être sûr de bien comprendre ces trois propriétés...
    Je pense que ce sont trois propriétés distinctes mais qui ont parfois la même valeur...

    Est-ce que vous auriez un petit résumé des différences et des points communs ?

    -------


    1- Au sujet de top je lis :

    Pour les éléments qui sont positionnés de manière absolue (position: absolute ou position: fixed), cette propriété définit la distance entre le bord haut de la marge (margin) de l'élément et le bord haut du bloc englobant.
    Quel est ce bloc englobant ? Est-ce le parent directe que celui-ci soit positionné ou non ?

  2. #2
    Membre Expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 910
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 910
    Par défaut
    Pour offsetTop c'est l'embrouille :

    Ici on a

    The returned value includes:

    the top position, and margin of the element
    the top padding, scrollbar and border of the offsetParent element
    Je n'ai pas compris mais ils ont l'air de dire que la mage est incluse alors qu'ici ils ont l'air de dire me contraire :

    The returned value is the top position of the object including the padding, scrollBar, and the border, but excluding the margin.
    1- Alors est-ce que ce offsetTop c'est la position du coin supérieure gauche de la borderBox ou de la marginBox ?


    ---> Pour top c'est la marginBox si j'ai bien compris :
    Pour les éléments qui sont positionnés de manière absolue (position: absolute ou position: fixed), cette propriété définit la distance entre le bord haut de la marge (margin) de l'élément et le bord haut du bloc englobant.
    ---> Et pour getBoundingClientRect().top ce serait la borderBox :
    getBoundingClientRect().top, bottom, left, right (location of the element's border box/bounding box when CSS transforms are applied)

    source ! Measuring Element Dimension and Location with CSSOM in Windows Internet Explorer 9 (Internet Explorer)

  3. #3
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    1-
    Quel est ce bloc englobant ?
    Le 1er parent positionné

    2- offsetTop

    Fais des tests si tu es confus.

  4. #4
    Membre Expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 910
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 910
    Par défaut
    Ok Merci.

    Ils auraient quand même pu le préciser !

    Sinon pour OffsetTop j'en avais déjà fait des tests : offsetTop : propriété fiable ou pas ? mais j'avais la flemme d'en refaire sur plusieurs navigateurs...

    Je trouve que c'est une infos qui devrait être fournie, je ne trouve pas trop normal de devoir tout tester sur tous les navigateurs, ce serait trop long...

    Enfin j'ai testé sur Chrome :

    1- Tous les offset (offsetTop, offsetLeft, offsetHeight...) semblent concerner la borderBox (et non la marginBox) et c'est pareil pour getBoundingClientRect().

    La différence entre les offsets et getBoundingClientRect() c'est la référence / le repère :

    - la position avec les offsets (offsetTop et offsetLeft) est relative au premier parent positionné (offsetParent).
    - Alors qu'avec getBoundingClientRect() (top et left) elle est relative au viewport...

    Pour les dimensions, je pense que les offsets (offsetHeight et offsetWidth) et getBoundingClientRect() (height et width) sont identiques...

    A suivre...

  5. #5
    Membre Expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 910
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 910
    Par défaut
    top est donc différent de offsetTop ---> top concerne la marginBox et offsetTop la borderBox.

    - Mais si l’élément est en position absolute et que marginTop est nul, top = offsetTop car dans ce cas la référence / le repère est le même (c'est le premier parent positionné (offsetParent)). Mais je ne sais pas si il y a des exceptions...

    - Si l’élément est en position relative top et offsetTop sont différents même si marginTop est nul, ce qui est normal car dans ce cas la référence / le repère n'est plus le même...

    Ah oui je crois que offsetTop est en lecture seule mais top peut être fixé par CSS ou JS...

  6. #6
    Invité
    Invité(e)
    Par défaut
    En utilisant
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    box-sizing:border-box;
    normalement, ça devrait aller : les border et margin ne sont plus pris en compte dans la définition des largeurs (et à priori des hauteurs aussi).


    border-box indique au navigateur de prendre en compte la bordure et le remplissage dans la valeur définie pour la largeur et la hauteur.
    Autrement dit, si on définit un élément avec une largeur de 100 pixels, ces 100 pixels inclueront la bordure et le remplissage éventuellement ajoutés et c'est le contenu de la boîte qui sera compressé pour absorber cette largeur supplémentaire.
    Cela permet généralement de simplifier le dimensionnement des éléments.
    Dernière modification par Invité ; 21/02/2018 à 16h10.

  7. #7
    Membre Expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 910
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 910
    Par défaut
    Citation Envoyé par Beginner. Voir le message
    Enfin j'ai testé sur Chrome :

    1- Tous les offset (offsetTop, offsetLeft, offsetHeight...) semblent concerner la borderBox (et non la marginBox) et c'est pareil pour getBoundingClientRect().

    La différence entre les offsets et getBoundingClientRect() c'est la référence / le repère :

    - la position avec les offsets (offsetTop et offsetLeft) est relative au premier parent positionné (offsetParent).
    - Alors qu'avec getBoundingClientRect() (top et left) elle est relative au viewport...
    A l'occassion de ce code #10 j'ai remarqué une différence de repère selon les navigateurs pour offsetLeft (et je suppose que c'est aussi le cas pour offsetTop) : le repérage se fait bien par rapport au premier parent positionné (offsetParent) mais plus précisément il semble que pour FF le repère c'est la borderBox du premier parent positionné (offsetParent) alors que pour Chrome c'est la paddingBox...

    Ah CSS, décidément, je comprends de mieux en mieux pourquoi lui et moi ça fait deux...

    Il me fait perdre tellement de temps, à quoi peut-on se fier, à quoi servent ces propriétés si leur comportement diffère d'un navigateur à l'autre... Cela diminue fortement (voir ça annule) l’intérêt de ces propriétés même pire elles sont nuisibles car on croit qu'on peut les utiliser sans problème alors que ce n'est pas le cas...

    Voilà c'est mon coup de gueule...

  8. #8
    Invité
    Invité(e)
    Par défaut
    bonjour,

    ce ne sont pas forcément ces propriétés qui varient d'un navigateur à l'autre.

    PAR CONTRE, chaque navigateur peut avoir une configuration "par défaut" (si on n'ajoute rien) différente des autres.

    Par exemple, pour les margin/padding du <body>, des <ul>, <li>,....

    Par conséquent :

    1- il faut toujours indiquer le doctype
    2- on peut faire un "reset" des propriétés par défaut, avec, notamment, au début du fichier CSS :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    * { margin:0; padding:0; border:0; box-sizing:border-box; font-size:100%; }

  9. #9
    Membre Expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 910
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 910
    Par défaut
    @Daniel : merci pour tes tests et le lien que j'ai commencé à regarder (je vois que c'est en français déjà...).

    @NoSmoking Merci pour le récapitulatif et la confirmation (ça va ce n'est pas moi qui délire cette fois...).


    Sinon j'utilise aussi ce lien : Measuring Element Dimension and Location with CSSOM in Windows Internet Explorer 9 (Internet Explorer), je trouve leur dessin utile et à la fin un petit résumé des propriétés avec les repère/références ce qui est rare mais hélas il n'est pas encore assez précis...

    Dans le dessin on voit bien que offsetTop concerne la localisation (position) de la borderBox de l'enfant et le repère/référence c'est la paddingBox du parent***... C'est sur ce dernier point(le repère/la référence) que FF diverge d'avec les autres navigateurs...

    Il faudrait que je rajoute dans quelles conditions on a ce que j'avais écrit (et corrigé car je me suis aperçu que j'avais écrit l'inverse) plus haut :

    Citation Envoyé par Beginner. Voir le message
    ...pour offsetLeft (et je suppose que c'est aussi le cas pour offsetTop) : le repérage se fait bien par rapport au premier parent positionné (offsetParent) mais plus précisément il semble que pour FF le repère c'est la borderBox du premier parent positionné (offsetParent) alors que pour Chrome c'est la paddingBox...
    Il y a déjà le box-sizing mais je crois qu'il n'y a pas que ça...


    *** EDIT : c'est confirmé par écrit aussi :

    Coordinates relative to an element's offsetParent (padding box of the offsetParent):

    offsetTop, offsetLeft (location of the border box)
    J'aime bien cette précision "padding box of the offsetParent" importante et tellement rare...

  10. #10
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut


    On ne mettra jamais parfaitement d'accord Chrome, Firefox et Edge !

    Il y a longtemps que je me soucie plus du positionnement exact de chaque élément dans la page web, je fais confiance :
    • aux navigateurs dignes de ce nom,
    • à la mise en page Grid,
    • aux unités CSS rem ou pt,
    • et aux techniques "responsive",

    pour que chaque navigateur offre un rendu plus ou moins similaire, sans jamais en espérer plus.

    Ci-dessous l'image du résultat et le code de ma page web (j'utilise knacss.css).

    Nom : offset.PNG
Affichages : 1677
Taille : 272,6 Ko

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    <!DOCTYPE html>
    <html lang="fr" dir="ltr">
    <head>
    	<!-- cache-control avec max-age=60 pour le développement uniquement -->
      <meta http-equiv="cache-control" content="public, max-age=60">
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
      <meta name="author" content="Daniel Hagnoul">
    	<title>Test</title>
    	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/lib/knacss.min.css">
    	<style>
                    main {
                            padding: 0.3rem;
                    }
                    #div-test {
                            width: 10rem;
                            height: 10rem;
                            border: 2pt solid #ABC;
                            margin-left: 10rem;
                    }
                    .row {
                            display: flex;
                    }
                    p {
                            font-style: italic;
                    }
                    li span {
                            display: inline-block;
                            min-width: 7rem;
                    }
      </style>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/locale/fr.js"></script>
      <script src="http://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.5.1.js"></script>
    	<script>
        'use strict';
     
                    document.addEventListener( "DOMContentLoaded", ev => {
                            // le DOM est construit, la page web n'est pas visible
                            moment.locale( "fr" );
                            klog( `DOM ready   : ${ new kDvjhDate() }` );
                            
                            // code du test
                    
                    
                            // fin code du test
                            
                    }, false );
        
        window.addEventListener( "load", ev => { 
                            // le DOM est construit et la page web est visible
                            klog( `Window load : ${ new kDvjhDate() }` );
                            
          // code du test
                                                                                                    
                            let
                                    data = "offsetLeft, offsetTop, offsetHeight, offsetWidth, clientLeft, clientTop, clientHeight, clientWidth".split(","),
                                    oElem = document.querySelector("#div-test"),
                                    oRect = oElem.getBoundingClientRect(),
                                    html = [""];
                                    
                            for ( const item of data ) {
                                    html.push( "<span>" + item.trim() + "</span>: " + Math.round( oElem[ item.trim() ] ) );
                            }
                            
                            document.querySelector("#r-offset").innerHTML = html.join( "<li>" );
                            
                            html = [""];
                            
                            for ( const key in oRect ) {
                                    if ( !isNaN( oRect[ key ] ) ){
                                            html.push( "<span>" + key + "</span>: " + Math.round( oRect[ key ] ) );
                                    }
                            }
                            
                            document.querySelector( "#r-bound" ).innerHTML = html.join( "<li>" );
     
                            // fin code du test
                                                    
          kIDUnique();
        }, false );
      </script>
    </head>
    <body>
    	<main>
     
    		<h1>Récupération valeurs</h1>
    		<section>
    			<h2>L'objet</h2>
    			<div id="div-test"></div>
    		</section>
    		<section class="row">
    			<div>
    				<h2>Offset-Client</h2>
    				<p>Position par<br> rapport premier parent positionné</p>
    				<ul id="r-offset"></ul>
    			</div>
    			<div>
    				<h2>ClientRect</h2>
    				<p>Position par<br> rapport au viewport</p>
    				<ul id="r-bound"></ul>
    			</div>
    		</section>
     
    	</main>
    </body>
    </html>

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  11. #11
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 212
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 212
    Par défaut
    Citation Envoyé par Beginner.
    dans ton code il y a deux fois <style> en corrigeant les chiffres ...
    j'ai corrigé cela, copié dans la trame un peu rapide, le margin:0 auto sur le <main>, entre autre, pouvant fausser les résultats.

    J'ai eu du mal à appréhender le soucis que tu décris mais j'ai effectivement vu dans ton exemple ce dont tu parles.

    Le point le plus bizarre me semble être le fait que Chrome, ni IE ni Edge d'ailleurs, ne recalcule pas les offsets suivant le modèle de boîte du conteneur.
    Quelque soit le modèle de boîte les offsets sont 0/-5 alors que sur FireFox on obtient des valeurs différentes.

    FireFox
    offsetLeft / offsetTop
    Autres
    offsetLeft / offsetTop
    box-sizing: border-box
    30 / -4
    0 / -5
    Les border et padding font partie de la boîte
    box-sizing: content-box
    0 / -5
    0 / -5
    Les border et padding sont exclus de la boîte
    Il semblerait que FireFox ait une meilleur approche car le calcul est fait sur les bords pris en comptent suivant les modèles de boîte.

    Il est vrai que cela peut prêter à grosses confuses

    Nota : le reset, ou non, n'est pas à l'origine de ce qui te préoccupe c'est plutôt le calcul/interprétation que font les navigateurs.

    Il faudrait regarder si ces écarts se retrouvent lorsque tu calcules la position au survol.

  12. #12
    Membre Expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 910
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 910
    Par défaut
    Salut,

    Je reviens sur un point qui m'avait dérouté (j'ai complété la version française et ajoutée la version anglaise) :

    Citation Envoyé par Beginner. Voir le message

    1- Au sujet de top je lis :

    When position is set to absolute or fixed, the top property specifies the distance between the element's top edge and the top edge of its containing block. (Containing block needs to have property position: relative)
    Pour les éléments qui sont positionnés de manière absolue (position: absolute ou position: fixed), cette propriété définit la distance entre le bord haut de la marge (margin) de l'élément et le bord haut du bloc englobant (il faut que le bloc englobant ait position: relative).
    Quel est ce bloc englobant ? Est-ce le parent directe que celui-ci soit positionné ou non ?
    Encore maintenant je trouve que ce qui est écrit dans ce passage est franchement déroutant !!! Regardez notamment la précision étrange : "Containing block needs to have property position: relative" !

    Alors en fait cette description est en partie fausse d’après mes tests et lectures mais je peux me tromper alors si quelqu'un peut corriger...

    Par exemple :

    1 ---> Quand l'élément est positionné de manière fixe (position: fixed) alors le repère n'a rien à voir avec le bloc englobant ou le 1er parent positionné, le repère c'est le viewport !!!

    2 ---> Quand l'élément est positionné de manière absolue (position: absolute) alors là oui le repère c'est le 1er parent positionné mais justement "positionné" cela peut-être relative, fixed, absolute ou sticky et c'est pourquoi la précision : "Containing block needs to have property position: relative" ! me semble étrange...

    Si il n'y a pas de parent positionné alors le repère c'est l’élément body...

    Qu'en pensez-vous ?

  13. #13
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    1 ---> Quand l'élément est positionné de manière fixe (position: fixed) alors le repère n'a rien à voir avec le bloc englobant ou le 1er parent positionné, le repère c'est le viewport !!!
    • C'est normal, puisque l'élément "fixed" est totalement sorti du flux.
    • Contrairement à l'élément "absolute", qui est positionné par rapport à son 1er parent lui-même positionné.



    absolute
    L'élément est retiré du flux normal et aucun espace n'est créé pour l'élément sur la page.
    Il est ensuite positionné par rapport à son ancêtre le plus proche qui est positionné s'il y en a un ou par rapport au bloc englobant initial sinon.
    [...]
    fixed
    L'élément est retiré du flux normal et aucun espace n'est laissé pour l'élément.
    L'élément est positionné relativement au bloc englobant initial formé par la zone d'affichage (viewport),
    [...]
    La position par défaut est "static" :
    static
    Comportement normal (par défaut).
    [...]
    Pour que le parent soit positionné, il faut qu'il soit "autre chose que static" : généralement "relative", mais le parent peut aussi être "absolute" ou "fixed" (ou "sticky").


    Il n'y a AUCUN mystère là-dedans.
    Dernière modification par Invité ; 12/12/2018 à 10h10.

  14. #14
    Membre Expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 910
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 910
    Par défaut
    Citation Envoyé par jreaux62 Voir le message
    Il n'y a AUCUN mystère là-dedans.
    Désolé mais tu n'as pas compris mon message... Ce que tu as cité le point 1 (mais il y a aussi le point 2) c'est ce que j'ai établi d’après mes lectures et tests alors oui pas de mystère là-dedans...

    Ma question porte sur le passage que j'ai cité et notamment la remarque :

    en : "(Containing block needs to have property position: relative)"
    fr : (il faut que le bloc englobant ait position: relative).

    As-tu lu ce passage ? Le revoilà :

    When position is set to absolute or fixed, the top property specifies the distance between the element's top edge and the top edge of its containing block. (Containing block needs to have property position: relative)
    Pour les éléments qui sont positionnés de manière absolue (position: absolute ou position: fixed), cette propriété définit la distance entre le bord haut de la marge (margin) de l'élément et le bord haut du bloc englobant (il faut que le bloc englobant ait position: relative)
    Ben justement pour moi ce passage n'est pas clair, il mélange deux cas (position: absolute et position: fixed) mais en fait j'ai compris par la suite ce qu'il veut dire, il fallait regarder la définition de ce qu'ils appellent "bloc englobant" et là ça va mieux mais je trouve ce passage peu clair car sans cette définition qui n'est pas si simple eh bien on ne comprend pas...

    D'ailleurs toi-même à ma question "Quel est ce bloc englobant ?" tu m'as répondu : "Le 1er parent positionné" et il se trouve que cette réponse est correcte dans certains cas et elle ne l'ai pas dans d'autres (par exemple le bloc englobant dans le cas où on a position: fixed ce n'est pas le 1er parent positionné c'est le wiewport).


    ---> Mais il reste quand même la remarque (il faut que le bloc englobant ait position: relative) que j'ai rappelée ci-dessus et que je ne comprends toujours pas... En effet elle me semble erronée comme déjà expliqué... Oui car dans ce passage on a deux cas 1- position: absolute et 2-position: fixed :

    - Dans le premier cas comme déjà dit : "Quand l'élément est positionné de manière absolue (position: absolute) alors là oui le repère c'est le 1er parent positionné mais justement "positionné" cela peut-être relative, fixed, absolute ou sticky et c'est pourquoi la précision : "Containing block needs to have property position: relative" ! me semble étrange...".

    En effet pour ce cas on aurait dû avoir une remarque plutôt comme celle-ci : "Containing block needs to have property position: relative, fixed, absolute ou sticky"

    - Dans le second cas : le bloc englobant c'est le wiewport alors la remarque devient quelque chose que je ne comprend pas à savoir : il faut que le wiewport ait position: relative.

    Voilà en espérant que ce soit plus clair...

  15. #15
    Invité
    Invité(e)
    Par défaut
    OK.

    1-
    containing block needs to have property position: relative
    En effet, il y a "réduction" de la définition.
    C'est généralement ce qu'on entend quand on dit "parent positionné".

    Mettre en position:relative; ne change rien au comportement du bloc lui-même (sachant que le défaut est "static", et que "absolute", "fixed" ou "sticky" modifient le comportement du bloc).
    Je pense que c'est ce que ça voulait dire.

    2-
    - Dans le second cas : le bloc englobant c'est le wiewport alors la remarque devient quelque chose que je ne comprend pas à savoir : il faut que le wiewport ait position: relative.
    Non.
    c'est de toute façon PAR DÉFAUT le viewport, si aucun parent n'est "positionné".


    3-
    ...alors la remarque devient quelque chose que je ne comprend pas à savoir...
    Non plus.
    Ça, ce n'est QUE TON interprétation.

    A mon avis, tu te focalises trop sur une seule "définition", alors qu'elle ne traduit pas entièrement et exhaustivement le comportement de chaque propriété.
    Tu essaies de tirer des généralités d'une règle / définition incomplète.

  16. #16
    Membre Expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 910
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 910
    Par défaut
    Salut,

    Ok pour la remarque on est d'accord qu'elle n'est pas clair (pour ne pas dire qu'elle est erronée)...

    Citation Envoyé par jreaux62 Voir le message
    Dans le second cas : le bloc englobant c'est le wiewport alors la remarque devient quelque chose que je ne comprend pas à savoir : il faut que le wiewport ait position: relative.
    Non.
    c'est de toute façon PAR DÉFAUT le viewport, si aucun parent n'est "positionné".
    Si si... Lis mieux ; j'ai bien dit juste avant "Oui car dans ce passage on a deux cas 1- position: absolute et 2-position: fixed..." donc "dans le second cas" ---> c'est le cas où on a position: fixed...

    Et dans ce cas* le bloc englobant c'est bel et bien le wiewport et ce même si l’élément a un parent positionné.

    Et quand* un élément est positionné de manière absolue (position: absolute) et qu'il n'a pas de parent positionné alors le repère (le bloc englobant) c'est l’élément body et non le wiewport (body et wiewport ce n'est pas pareil).

    * Hors cas particulier car c'est vrai que dans la définition on voit qu'il y a des cas particuliers :
    Si la propriété position vaut absolute ou fixed, le bloc englobant peut également être constitué par le bord de la boîte de remplissage le plus proche qui a :

    1. Une propriété transform ou perspective avec une valeur différente de none
    2. Une propriété will-change qui vaut transform ou perspective
    3. Une propriété filter différente de none ou une propriété will-change différente of filter (ne fonctionne que pour Firefox).
    Citation Envoyé par jreaux62 Voir le message
    Non plus.
    Ça, ce n'est QUE TON interprétation.
    Ben non ce n'est pas mon interprétation c'est de l'application toute bête de la remarque qui est français : il faut que le bloc englobant ait position: relative.

    Dans le deuxième cas (où on a position: fixed) le bloc englobant c'est le wiewport donc je remplace bêtement "bloc englobant" par "wiewport" et cela donne : il faut que le wiewport ait position: relative. Ce qui n'a pas de sens...


    Citation Envoyé par jreaux62 Voir le message
    A mon avis, tu te focalises trop sur une seule "définition", alors qu'elle ne traduit pas entièrement et exhaustivement le comportement de chaque propriété.
    Tu essaies de tirer des généralités d'une règle / définition incomplète.
    Non non je dirais plutôt : j'ai lu un passage que j'ai essayé de comprendre et je me suis aperçu qu'il n'était pas clair alors j'ai fait des recherches et des tests qui confirment que ce passage n'est pas clair et alors je suis venu sur ce fil pour avoir l'avis d'autres personnes car je peux me tromper...

  17. #17
    Membre Expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 910
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 910
    Par défaut
    Citation Envoyé par Beginner. Voir le message
    Ben justement pour moi ce passage n'est pas clair, il mélange deux cas (position: absolute et position: fixed) mais en fait j'ai compris par la suite ce qu'il veut dire, il fallait regarder la définition de ce qu'ils appellent "bloc englobant" et là ça va mieux mais je trouve ce passage peu clair car sans cette définition qui n'est pas si simple eh bien on ne comprend pas...

    D'ailleurs toi-même à ma question "Quel est ce bloc englobant ?" tu m'as répondu : "Le 1er parent positionné" et il se trouve que cette réponse est correcte dans certains cas et elle ne l'ai pas dans d'autres (par exemple le bloc englobant dans le cas où on a position: fixed ce n'est pas le 1er parent positionné c'est le wiewport).
    Voici ci-après la définition qui m'a permit de mieux comprendre le passage :

    Identifier le bloc englobant
    Section


    Le bloc englobant est entièrement déterminé par la valeur de la propriété position pour l'élément :
    • Si la propriété position vaut static ou relative, le bloc englobant est constitué par le bord de la boîte de contenu de l'ancêtre le plus proche qui est un conteneur de bloc (c'est-à-dire qui est un élément avec display qui vaut inline-block, block ou list-item) ou qui crée un contexte de formatage (tel qu'un conteneur de tableau, un conteneur flexible, un conteneur de grille ou le conteneur du bloc même).
    • Si la propriété position vaut absolute, le bloc englobant est constitué par le bord de la boîte de remplissage (padding) de l'ancêtre le plus proche dont la valeur de position est différente static (fixed, absolute, relative ou sticky).
    • Si la propriété position vaut fixed, le bloc englobant est formé par le viewport (ou la page dans le cas des média paginés).
    • Si la propriété position vaut absolute ou fixed, le bloc englobant peut également être constitué par le bord de la boîte de remplissage le plus proche qui a :
      1. Une propriété transform ou perspective avec une valeur différente de none
      2. Une propriété will-change qui vaut transform ou perspective
      3. Une propriété filter différente de none ou une propriété will-change différente of filter (ne fonctionne que pour Firefox).


  18. #18
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 212
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 212
    Par défaut
    Citation Envoyé par Beginner.
    Encore maintenant je trouve que ce qui est écrit dans ce passage est franchement déroutant !!! Regardez notamment la précision étrange : "Containing block needs to have property position: relative" !

    Alors en fait cette description est en partie fausse d’après mes tests et lectures mais je peux me tromper alors si quelqu'un peut corriger...
    Pour moi il s'agit d'une coquille et la mise à jour ne me semble s'appuyer sur ... !?! ...

    A voir : Compare Revisions

    Citation Envoyé par Beginner.
    1 ---> Quand l'élément est positionné de manière fixe (position: fixed) alors le repère n'a rien à voir avec le bloc englobant ou le 1er parent positionné, le repère c'est le viewport !!!
    Attention : Depuis la prise en compte du CSS3 et des « animations » cela n'est plus forcément vrai, à preuve ce que tu as pu lire et que tu reprends dans ton post

    Identifier le bloc englobantSection
    • Si la propriété position vaut absolute ou fixed, le bloc englobant peut également être constitué par le bord de la boîte de remplissage le plus proche qui a :
      1. Une propriété transform ou perspective avec une valeur différente de none
      2. Une propriété will-change qui vaut transform ou perspective
      3. Une propriété filter différente de none ou une propriété will-change différente of filter (ne fonctionne que pour Firefox).

  19. #19
    Membre Expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 910
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 910
    Par défaut
    Oui merci.
    Je ne savais pas qu'on pouvait savoir qui est l'auteur de cet ajout...

Discussions similaires

  1. Question facile, erreur bizzare lors d'un Left, Top
    Par SpiderAlpha dans le forum C++Builder
    Réponses: 4
    Dernier message: 05/05/2004, 12h56
  2. Requetes TOP/BOTTOM
    Par bilbon.S dans le forum Requêtes
    Réponses: 7
    Dernier message: 21/04/2004, 12h30
  3. MessageBox always on top
    Par Ingham dans le forum Composants VCL
    Réponses: 5
    Dernier message: 08/04/2004, 13h44
  4. ASM + DELPHI ... soucis ... mais top intéressant !
    Par - Robby - dans le forum Langage
    Réponses: 9
    Dernier message: 21/11/2003, 15h58

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo