HTML DOM style propriété position
style Objets Définition et utilisation
ensembles de position de propriété ou retourne le type de méthode élément de positionnement utilisé (statique (statique), relative (relative), dans l'absolu (absolu) ou fixes (fixe)).
grammaire
Définissez la propriété de position:
Object.style.position="static|absolute|fixed|relative|inherit"
Renvoie des propriétés de position:
Object.style.position
| 值 | 描述 |
|---|---|
| static | 默认。位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。 |
| absolute | 位置设置为 absolute 的元素，可定位于相对于第一个已定位（非静态的）的包含它的元素的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及 "bottom" 属性来规定。 |
| fixed | 位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及 "bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）。 |
| relative | 位置被设置为 relative 的元素，可将其定位于相对于其正常位置的地方，因此 "left:20" 会将元素移至元素正常位置左边 20 个像素的位置。 |
| inherit | position 属性的值从父元素继承。 |
support du navigateur
Tous les principaux navigateurs prennent en charge la propriété de position.
Note: IE7 et les versions antérieures ne supportent pas la valeur "inherit".IE8 ne fournit DOCTYPE! Supporté "inherit". soutien IE9 "inherit".
Exemples
Exemples
L'élément la position (emplacement) de statique (statique, par défaut) absolu (absolu):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>本教程(w3big.com)</title>
<script>
function displayResult(){
document.getElementById("b1").style.position="absolute";
document.getElementById("b1").style.top="100px";
document.getElementById("b1").style.left="100px";
}
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<input type="button" id="b1" onclick="displayResult()" value="定位我">
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>本教程(w3big.com)</title>
<script>
function displayResult(){
document.getElementById("b1").style.position="absolute";
document.getElementById("b1").style.top="100px";
document.getElementById("b1").style.left="100px";
}
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<input type="button" id="b1" onclick="displayResult()" value="定位我">
</body>
</html>
Essayez »
style Objets