Home > Article > Web Front-end > Introduction and examples of css left right top bottom positioning
Introduction and examples of css left right top bottom positioning
- 巴扎黑Original
- 2017-06-28 09:42:031980browse
These four CSS attribute styles are used to position the object box. The position attribute value must be defined as absolute or relative for this value to take effect.
1. Grammar structure
Left, right, top, bottom followed by numbers + html units.
Demonstration structure
div{left:20px}
div{right:20px}
div{top:20px}
div{bottom:20px}
Left How much is the distance to the left
Right How much is the distance to the right
Top How much is the distance from the top
How much is the distance from Bottom to the bottom
2. Conditions of use
Usually using left, right, top, and bottom alone are invalid. You need to use absolute positioningCSS position style to take effect.
Generally, only one of left and right can be used in a style. You cannot set both left and right. Either use left instead of right, or use right instead of left. If both left and right are used, then There will be compatibility issues. If an object is set to a certain distance to the left, the distance to the right will naturally be there, so there is no need to set the left.
In the same way, only one of top and bottom can be used for an object, otherwise logical compatibility problems will occur. For example, if one person asks you to go left, and another person asks you to go right, and at the same time they tell you to go left or right, it is difficult for you to judge which way to go.
3. Use in absolute positioning
Generally, left, right, top, and bottom are used to position the object in conjunction with position. You can enter the CSS position tutorial to learn about these style attributes.
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" language="javascript">
function selA(id) {
switch(id) {
case "1":
document.getElementById("subobj").style.position = "static";
break;
case "2":
document.getElementById("subobj").style.position = "absolute";
break;
case "3":
document.getElementById("subobj").style.position = "relative";
break;
case "4":
document.getElementById("subobj").style.position = "fixed";
break;
}
}
</script>
<style type="text/css">
#all {
width:190px;
height:95px;
padding:10px 0 0 10px;
border:1px #000 solid;
position:relative;
}
#subobj {
width:100px;
height:50px;
border:1px #000 solid;
bottom:9px;
position:static;
}
#sel {
margin-top:5px;
}
select {
width:200px;
}
</style>
</head>
<body>
<div id="all">
<div id="subobj">子对象1</div>
</div>
<div id="sel"><select onchange="selA(this.value)"><option value="1">static</option><option value="2">absolute</option><option value="3">relative</option><option value="4">fixed</option></select></div>
</body>
</html>The above is the detailed content of Introduction and examples of css left right top bottom positioning. For more information, please follow other related articles on the PHP Chinese website!