Introduction and examples of css left right top bottom positioning-CSS Tutorial-php.cn

Introduction and examples of css left right top bottom positioning

巴扎黑

Release： 2017-06-28 09:42:03

Original

2016 people have browsed it

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>

Copy after login

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!