Maison > interface Web > tutoriel CSS > Quels sont les attributs de position du CSS ? Introduction à l'attribut position et à son utilisation en CSS

Quels sont les attributs de position du CSS ? Introduction à l'attribut position et à son utilisation en CSS

不言
Libérer: 2018-08-16 10:43:55
original
4921 Les gens l'ont consulté

Ce que cet article vous apporte, c'est quels sont les attributs de position du CSS ? L'introduction à l'attribut position et à son utilisation en CSS a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer, j'espère que cela vous sera utile.

Introduction à l'attribut position

(1) L'attribut position en CSS existe depuis CSS2. Cet attribut spécifie le type de positionnement de l'élément. Tous les principaux navigateurs prennent en charge l'attribut position.

(2) Il existe quatre valeurs facultatives pour l'attribut position en CSS : statique, relative, absolue et fixe. Ils sont présentés séparément ci-dessous. (En fait, il existe un héritage, mais celui-ci est propre à IE et ne sera pas abordé ici)

< ;/h3>

1, introduction de base
(1) static est la valeur par défaut. Indique qu'il n'y a pas de positionnement ou qu'il n'a pas l'attribut de positionnement.
(2) Si la valeur de l'attribut position de l'élément est statique (ou si l'attribut position n'est pas défini), l'élément apparaît dans le flux normal (en ignorant les déclarations haut, bas, gauche, droite ou z-index).

2, exemple d'utilisation

css:

<style>
  div {
    width: 200px;
    height: 100px;
    background-color: #C9FFFF;
  }
</style>
Copier après la connexion

html:

<div></div>
<input>
Copier après la connexion

Nous ne définissons pas la valeur de l'attribut position de l'élément, Donc la valeur par défaut L'effet d'affichage de .

(2) Le processus de positionnement relatif est le suivant :

Quels sont les attributs de position du CSS ? Introduction à lattribut position et à son utilisation en CSS Générez d'abord un élément de la manière par défaut (statique) (et l'élément flotte comme un calque).

Ensuite, il se déplace par rapport à la position précédente. La direction et l'amplitude du mouvement sont déterminées par les attributs gauche, droite, haut et bas. La position avant le décalage reste inchangée.
<div class="position-static"></div> <input type="text"/>
<h3 id="position: relative(相对定位)"> position: relative(相对定位)</h3>
Copier après la connexion

2, exemple de code

Le code suivant définit la position de la zone de saisie de texte sur relative (positionnement relatif) et la déplace de 15 pixels vers la droite et de 15 pixels vers le haut par rapport à la valeur par défaut position.

css :


html :

L'effet de course est le suivant :

  div {
    width: 200px;
    height: 100px;
    background-color: #C9FFFF;
  }
   
  input {
    position: relative;
    left: 15px;
    top: -15px;
  }
Copier après la connexion

1, Introduction de base

<div></div>
<input type="text" />
Copier après la connexion
(1) absolu génère des éléments absolument positionnés.

(2) Un élément positionné de manière absolue utilise les attributs gauche, droite, haut et bas pour effectuer un positionnement absolu par rapport à son élément parent le plus proche avec un attribut de positionnement.

(3) Si aucun élément parent de ce type n'existe, il est relatif à l'élément body, c'est-à-dire par rapport à la fenêtre du navigateur.

Quels sont les attributs de position du CSS ? Introduction à lattribut position et à son utilisation en CSS2, exemple de code

Le code suivant positionne l'élément title de manière absolue par rapport à son conteneur parent (notez que la position du conteneur parent doit être définie sur relative).

En même temps, utilisez l'attribut top pour déplacer l'élément title vers le haut afin qu'il recouvre la bordure supérieure du conteneur parent.

Enfin, le centrage horizontal de cet élément en position absolue est obtenu grâce à la combinaison de gauche et de marge gauche.

css :

html :



L'effet de l'opération est le suivant :

  #box {
    width: 200px;
    height: 100px;
    -webkit-box-flex:1;
    border: 1px solid #28AE65;
    border-radius:6px;
    padding: 20px;
    position: relative;
    font-size: 12px;
  }
 
  #title {
    background: #FFFFFF;
    color: #28AE65;
    font-size: 15px;
    text-align: center;
    width: 70px;
    height: 20px;
    line-height: 20px;
    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: -35px;
  }
Copier après la connexion

1, introduction de base

(1) fixe génère un élément positionné de manière absolue, qui est positionné par rapport à la fenêtre du navigateur.
<div id="box">
 <div id="title">标题</div>
 欢迎来到php中文网
</div>
Copier après la connexion
(2) Les éléments à position fixe ne changeront pas avec la barre de défilement de la fenêtre du navigateur, et ne seront pas non plus affectés par le flux du document, mais seront toujours situés quelque part dans la vue dans la fenêtre du navigateur.

2, exemple de code

(1) Le code suivant place la zone de saisie en bas de la fenêtre du navigateur. Quels sont les attributs de position du CSS ? Introduction à lattribut position et à son utilisation en CSS

css :



html :


L'effet de course est le suivant :

  input {
    position: fixed;
    bottom: 10px;
  }
Copier après la connexion

(2) Vous pouvez voir que quelle que soit la façon dont la barre de défilement défile, la zone de saisie est toujours en bas de la fenêtre.

<ol>
 <li>数据</li><li>数据</li><li>数据</li><li>数据</li><li>数据</li><li>数据</li>
 <li>数据</li><li>数据</li><li>数据</li><li>数据</li><li>数据</li><li>数据</li>
 <li>数据</li><li>数据</li><li>数据</li><li>数据</li><li>数据</li><li>数据</li>
 <li>数据</li><li>数据</li><li>数据</li><li>数据</li><li>数据</li><li>数据</li>
</ol>
<input type="text" />
Copier après la connexion
Recommandations associées :

Quels sont les attributs de position du CSS ? Introduction à lattribut position et à son utilisation en CSScss background-position property_html/css_WEB-ITnose


Comprendre l'attribut de position CSS_html/ css_WEB-ITnez

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal