Calcule le sha1 d'un fichier
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.
Exemple : Copier le code
h2
{
position:absolute;
left:100px;
top:150px;
}
table class="attribut">
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 |