La propriété CSS:position

CSS la position d'un élément

Les propriétés CSS

La propriété de feuille de style css position permet de spécifier le type de positionnement.

Définition et utilisation:La propriété position

La propriété CSS position est utilisée pour positioner un élément.

	h2
	{
		position:absolute;
		left:100px;
		top:150px;
	}

table class="attribut"> Valeurs par défautstatic Inherited: non Animable : non En savoir plus sur l'animable Version: CSS2 Syntaxe JavaScript: object.style.position="absolute"

Valeurs de la propriété :

Valeur	Description
absolute	Génère un élément en position absolue, positionné par rapport au premier élément parent qui a une position autre que statique. La position de l'élément est spécifié avec les propriétés "left", "top", "right", et "bottom"
fixed	Génère un élément en position absolue, positionné par rapport à la fenêtre du navigateur. La position de l'élément est spécifié avec propriétés "left", "top", "right", et "bottom"
relative	Génère un élément en position relative, positionné par rapport à sa position normale, donc "left: 20" ajoute 20 pixels à la position de l'élément LEFT
static	Par défaut. Pas de position, l'élément se trouve dans le flux normal
inherit	Indique que le paramètre de la propriété doit être héritée de l'élément parent. Internet Explorer (IE8 y compris) ne supporte pas cette valeur

Si nous devions animer ces propriétés, nous pourrions voir à quel point cela nous donne du contrôle (bien que ce ne soit pas une bonne idée pour des raisons de performance) :

La propriété CSS position est utilisée pour positioner un élément.

Exemple : Copier le code

	
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>La propriété CSS position</title>
<style>
.parent {
  border: 2px solid #0074d9;
  color: #0074d9;
  padding: 20px;
}

.element {
  border: 1px dotted #000;
  background-color: #eee;
  padding: 20px;
  color: #000;
  position: relative;
  margin-top: 10px;
  animation: push ease 5s alternate infinite;
  animation-delay: 1.5s;
}

@keyframes push {
  0% {
    left: 0;
    top: 0;
  }
  
  50% {
    left: -100px;
    top: 100px;
  }
  100% {
    top: 50px;
    left: 50px;
  }
}

body, html {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
</head>
<body>


<div class="parent"><h1>La propriété position css</h1>
Élément Parent 
<div class="element">Élement enfant</div>
</div>
</body>
</html>

Voici un exemple avec la position fixed
Cette valeur est similaire à celle qui permet de positionner un élément n'importe où par rapport au document, mais elle n'est pas affectée par le défilement. Voyez l'élément enfant dans la démo ci-dessous et comment, une fois le défilement effectué, il continue à se coller au bas de la page:fixedabsolute

Exemple : Copier le code

	
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>La propriété CSS position</title>
<style>
.parent {
  padding: 70px;
  position: relative;
  background-color:#f1eded;
  margin-top: 50px;
}

.element {
  background-color: #0074d9;
  opacity: .85;
  padding: 20px;
  color: rgba(255,255,255,.9);
  position: fixed;
  bottom: 150px;
  left: 50px;
  right: 50px;
}




/* Alignment styles */

body, html {
  height: 100%;
}

p {
  margin: 0 auto;
  max-width: 450px;
  margin-top: 40px;
  line-height: 1.5;
}

body {
  font-family: Georgia, serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
</head>
<body>
<h1>La propriété position css</h1>

<div class="parent">
Élément Parent 
<div class="element">Élement enfant</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla pharetra diam sit amet nisl suscipit adipiscing. Enim diam vulputate ut pharetra sit amet aliquam id diam. Sit amet consectetur adipiscing elit duis tristique sollicitudin nibh sit. Neque ornare aenean euismod elementum nisi quis eleifend. Sed velit dignissim sodales ut eu sem integer. Non pulvinar neque laoreet suspendisse interdum consectetur libero id. Sed viverra ipsum nunc aliquet bibendum. Tortor at risus viverra adipiscing at in tellus integer. Sit amet risus nullam eget felis. At risus viverra adipiscing at. Nisl pretium fusce id velit ut tortor pretium. Hendrerit dolor magna eget est lorem ipsum dolor. Tincidunt ornare massa eget egestas purus viverra accumsan in. Dapibus ultrices in iaculis nunc sed augue lacus.</p>
<p>
Nibh sit amet commodo nulla facilisi. Elit at imperdiet dui accumsan sit amet nulla facilisi morbi. Dui accumsan sit amet nulla facilisi morbi tempus. Ac ut consequat semper viverra. Eget nulla facilisi etiam dignissim diam quis. Sem viverra aliquet eget sit amet tellus. Nisl tincidunt eget nullam non nisi est. Mauris pellentesque pulvinar pellentesque habitant. Magna fringilla urna porttitor rhoncus dolor purus. Amet porttitor eget dolor morbi non arcu risus quis varius. Bibendum est ultricies integer quis auctor elit sed. Enim lobortis scelerisque fermentum dui faucibus in ornare quam.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla pharetra diam sit amet nisl suscipit adipiscing. Enim diam vulputate ut pharetra sit amet aliquam id diam. Sit amet consectetur adipiscing elit duis tristique sollicitudin nibh sit. Neque ornare aenean euismod elementum nisi quis eleifend. Sed velit dignissim sodales ut eu sem integer. Non pulvinar neque laoreet suspendisse interdum consectetur libero id. Sed viverra ipsum nunc aliquet bibendum. Tortor at risus viverra adipiscing at in tellus integer. Sit amet risus nullam eget felis. At risus viverra adipiscing at. Nisl pretium fusce id velit ut tortor pretium. Hendrerit dolor magna eget est lorem ipsum dolor. Tincidunt ornare massa eget egestas purus viverra accumsan in. Dapibus ultrices in iaculis nunc sed augue lacus.</p>
<p>
Nibh sit amet commodo nulla facilisi. Elit at imperdiet dui accumsan sit amet nulla facilisi morbi. Dui accumsan sit amet nulla facilisi morbi tempus. Ac ut consequat semper viverra. Eget nulla facilisi etiam dignissim diam quis. Sem viverra aliquet eget sit amet tellus. Nisl tincidunt eget nullam non nisi est. Mauris pellentesque pulvinar pellentesque habitant. Magna fringilla urna porttitor rhoncus dolor purus. Amet porttitor eget dolor morbi non arcu risus quis varius. Bibendum est ultricies integer quis auctor elit sed. Enim lobortis scelerisque fermentum dui faucibus in ornare quam.
</p>
</div>
</body>
</html>

Prise en charge de la propriété dans les navigateurs

Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.

Explorateur
Verssion	1	7	1	1	4

Liste des propriétés css

position

Les propriétés CSS par ordre alphabétique

CSS la position d'un élément

Définition et utilisation:La propriété position

Valeurs de la propriété :

Prise en charge de la propriété dans les navigateurs

La méthode secrète likes sans fin sur Facebook