Lorsque vous positionnez des éléments en position relative, il faut faire attention au modèle de boite.

Soit les div de classe carre, il sont dans une autre div, et positionnés avec top et left.

        .carre {
            box-sizing: border-box;
            // box-sizing: content-box;
            position: relative;
            width: 100px;            height: 100px;
            background: blue;            border:red solid 1px;
        }

box-sizing : content-box

Ici on prend en compte l’épaisseur de la bordure pour détermine la position de l’élément suivant.

box-sizing:border-box

Ici on ne tient pas compte de l’épaisseur des bordures pour détermine la position de l’élément suivant

La position de la souris

pageX, pageY

mouseevent.pageX et mouseevent.pageY représentent la position de la souris dans la page. La position 0 correspond au coin supérieur gauche de la page web.

Si vous scroller le document vers la droit de 200 pixel, et que la souris pointe à 100 pixel à droite du bord gauche du navigateur, pageX indiquera 300 au lieu de 100, donc ça tient compte du scrolling.

clientX, clientY

mouseevent.clientX et mouseevent.clientY représent la position de la souris par rapport à la fenêtre du navigateur seulement, et donc insensible au scrolling.

Position d’un élément getBoundingClientRect()

Cette méthode renvoit un obhet DOMRect, qui contient les information de position et de taille

element.getBoundingClientRect()
#affichage
{    bottom: 311 // sur axe Y,par rapport au bord haut de la page (origine point de vue)
     height: 100 // hauteur de l'élément
    left: 209 // sur axe X
    right: 309  // sur axe X
    top: 211 // sur axe Y
    width: 100 // largeur de l'élément
    x: 209
    y: 211
}

https://developer.mozilla.org/fr/docs/XPCOM_Interface_Reference/nsIDOMClientRect

element.offsetLeft

Renvoit le décalage horizontal en pixel de l’élément par rapport au parent (de coin supérieur gauche à coin supérieur gauche)

element.offsetTop

Renvoit le décalage vertical en pixel de l’élément par rapport au parent (de coin supérieur gauche à coin supérieur gauche)

Pourquoi le CSS Grid Layout?

Aujourd’hui pour faire du responsive design en a besoin d’un framework CSS

 

Le premier des framework CSS qui permet de faire du responsive design est bootstrap
Ensuite il y en a eu d’autres j’ai pu utilisé par exemple UIKIT et sémantiqueUI.

 

Mais le problème que je t’ai rencontré été que c’est vrai moi qui était en constante évolution, et passer de l’un à l’autre de ces framework était assez fastidieux, car j’ai utilisé pas la même syntaxe

Pourtant on peut faire du responsive design en CSS pure mais c’est assez fastidieux
il y a les media queries qui vous permettent de réaliser le responsive design.

Mais comme vous le savez le CSS c’est assez difficilement lisible.

Bien sûr il y a des solutions comme le SASS que vous transpilez en CSS mais ce n’est pas encore la solution idéale

Sans parler que le CSS a beaucoup de hacks qu’il faut utiliser pour avoir le même design sur tous les navigateurs

Puis est apparue la technologie flexbox qui résout un peu le problème

Mais cette dernière technologie est unidimensionnel et notre page est à deux dimensions

C’est pour résoudre ses problèmes que le CSS grid a été inventé pour l’instant seulement Google Chrome et Firefox l’ont implémenté

conception moderne de site, le responsive design pour adapter le site web aux différents formats d’écran

Une grille simple le minimum syndical

Une grille simple et responsive cette fois-ci

Le mieux est de combinaison de technologie afin d’avoir le mec plus ultra du design d’un site web. Ainsi en 2017 vous pouvez ne pas utiliser les framework CSS
Vous pouvez vous baser uniquement sur les technologies qui sont embarquées de façon native par les navigateurs web.