04 Positionnement et point d'ancrage de la fondation CSS

Positionnement basé sur CSS et positionnement d'ancre Le
positionnement
est un schéma permettant de manipuler la mise en page des éléments html dans CSS. La
position de l'attribut est
la
valeur par défaut statique , pas de positionnement spécial, et l'objet suit le principe HTML; positionnement
absolu
, qui fait complètement glisser l'objet du flux de documents, utilisez gauche / droite / haut / bas et d'autres attributs par rapport à son élément parent le plus proche avec des paramètres de positionnement pour un positionnement absolu; s'il n'y a pas un tel objet parent, il sera positionné en fonction de la page Web et de sa cascade est défini par l'attribut z-index positionnement
relatif
relatif du document suivre le flux normal, sera décalé par rapport aux positions de leurs attributs droit, haut, gauche, bas (emplacement relatif) et autres dans le flux normal du document; qui est défini par les propriétés multicouches de z-index. Positionnement absolu similaire
fixe
Cependant, sa référence est la fenêtre "visuelle" du navigateur, et elle est en dehors du flux de documents standard;
hériter
spécifie la méthode de positionnement de l'élément pour hériter du valeur de l'attribut position de l'élément parent.
Post - it
Post - it positionnement, le positionnement est basé sur la position de défilement de l'utilisateur.
Il se comporte comme position: relative; et lorsque la page défile au-delà de la zone cible, il se comporte comme position: fixed; et il sera fixé à la position cible.
La relation hiérarchique de la valeur par défaut
automatique de l' index z de l'élément de positionnement
. Suivant la structure, l'ordre de la couche d'élément de positionnement écrite plus tard est plus élevé.
nombre Une
valeur entière sans unité. Il peut être un nombre négatif, plus la valeur est élevée, plus l'ordre de la couche
Conseil
Cet attribut s'applique uniquement aux objets dont la valeur d'attribut de position est relative ou absolue, fixe.
La hiérarchie des éléments enfants sera affectée L'élément parent
contenant le
concept de bloc
contenant le bloc est le fondement du positionnement absolu, y compris le bloc est de fournir des coordonnées, le décalage et la plage d'affichage de référence est des éléments positionnés de manière absolue qui déterminent le décalage du point de départ et le positionnement absolu Pourcentage référence de longueur; par
défaut, le corps est un grand bloc contenant, tous les éléments positionnés de manière absolue sont affichés en fonction de la fenêtre pour déterminer leur position et leur taille en pourcentage, si nous définissons l'élément contenant comme le bloc d'élément contenant À l'avenir, pour le contenu élément de positionnement absolu, sa position d'affichage sera positionnée en fonction de l'élément contenant supérieur le plus proche avec fonction de positionnement.
Définissez l'élément comme bloc conteneur: ajoutez la position de déclaration: relative | absoulte à l'élément parent de l'élément positionné de manière absolue;
la différence entre le positionnement relatif et le positionnement absolu est différente. L'
objet de référence du positionnement absolu est le bloc conteneur (parent) , positionnement relatif L'objet de référence est la position de l'élément lui-même;
le positionnement absolu fait glisser l'objet hors du flux de documents afin qu'il n'occupe pas d'espace, et le positionnement relatif ne détruit pas la séquence de flux de documents normale. Qu'il soit déplacé ou non, l'élément occupe toujours l'espace d'origine. Point d'
ancrage
La réalisation du point d' ancrage se fait principalement à travers une balise.
Fonction: Accédez à différents emplacements sur la page Web.
Permet de
créer un point d'ancrage.

Cible
<nom de balise id = 'id nom correspondant au point d'ancrage'>
transparent
ie9 et
filtre inférieur : alpha (opacity = valeur); plage de valeurs 0- 100
Autres navigateurs
opacity: 0.5; (La plage de valeurs de la valeur est 0-1 0.1,0.2,0.3 ----- 0.9—1)
rgba (255,255,0,0.5) (le dernier chiffre indique la transparence et la plage de valeurs est 0- 1) Ne prend en charge que la syntaxe
Flash du navigateur supérieure à IE8. Sous-titres déroulants <marquee behavior = "scroll / alternative" direction = "haut (de bas en haut) / bas (de haut en bas) / gauche (de droite à gauche) / droite (de gauche à droite) " scrollamount (scrolling speed) =" value "height =" value (up and down scrolling range) "width =" "(left and right scrolling range)> content