Reproduced from:
http://wujt.iteye.com/blog/1181558
OnePosition
1. Grammar: position:static/absolute/fixed/relative
2, Parameters:
(1)Static: Default value, no special location, objects follow HTML positioning rules.
(2)Absolute: Drag objects out of the document stream, using attributes such as Left,right,top,bottom to be absolutely positioned relative to the parent object closest to one of the most positioned settings. If no such parent object exists, it is based on the body object. And the cascade is defined by the Z-index property.
(3)relative: Objects cannot cascade, but will offset the position in the normal document stream based on attributes such as Left,right,top,bottom.
(4)fixed: Object positioning follows absolute (absolute).
3. Description:
How the object is positioned.
Setting this property value to absolute drags the object away from the normal document flow absolute positioning without regard to the layout of its surrounding content. If other objects with different Z-index properties already occupy the given position, they will not interact with each other, but will cascade in the same place.
The object does not have an outer margin margin, but there is still an inner margin padding and a border border.
The corresponding scripting features are: position.
4, Examples:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Untitled Document </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>
<body>
<div id= "All" >
<div id= "Subobj" > Child objects 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>
5, Tips:
(1) From the above example, it can be seen that only the Position property value is absolute or relative when top, right, bottom and left are valid.
(2) Property values for position:fixed are not currently supported.
Second, Z-index
1. Grammar:Z-index:auto/number2, Parameters:
(1) Auto: Default value, following the location of its parent object.
(2) Number: An integer value of no units, which can be negative.
3. Description:
Sets the stacking order of objects.
objects with larger number values are overwritten over objects with smaller number values. If this property of two absolutely anchored objects has the same number value, it is stacked according to the order in which they are declared in the HTML document。for an absolutely anchored object that does not specify this property, an object with a positive number value for this property is above it, and the number with a negative number is below it. This property can be removed by setting the parameter to NULL. This property only works on objects that have a position property value of relative or absolute.
The corresponding scripting features are: ZIndex.
4, Examples:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Untitled Document </title>
<script type= "Text/javascript" language= "JavaScript" >
function Sela (id,v) {
if (v) obj = "Subobj"; else obj = "Subobj2";
Switch (ID) {
Case "0":
document.getElementById (obj). Style.zinex = 0;
Break
Case "1":
document.getElementById (obj). Style.zindex = 10;
Break
Case "2":
document.getElementById (obj). Style.zindex =-10;
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;
top:10px;
Position:absolute;
Background-color: #09C;
}
#subobj2 {
width:100px;
height:50px;
border:1px #000 Solid;
top:10px;
Position:absolute;
Background-color: #CCC;
}
#sel {
margin-top:5px;
}
Select {
width:95px;
}
</style>
<body>
<div id= "All" >
<div id= "Subobj" > Child objects 1</div>
<div id= "Subobj2" > Child objects 2</div>
</div>
<div id= "SEL" >
<select onchange= "Sela (this.value,1)" ><option value= "0" > Object 1</option><option value= "1" >10 </option><option value= "2" >-10</option></select>
<select onchange= "Sela (this.value,0)" ><option value= "0" > Object 2</option><option value= "1" >10 </option><option value= "2" >-10</option></select>
</div>
</body>
5, Tips:
(1) Z-index is only valid if the value of the Position property is relative or absolute.
third, top, right, Bottom, leftThe settings for each of the four properties are the same, with top being the example below.
1. Grammar: Top:auto/length
2, Parameters:
(1) Auto: Default value, no special positioning, according to the HTML positioning rules in the document flow distribution.
(2) Length: A value or percentage of a number consisting of floating-point numbers and unit identifiers. You must define a position property value of absolute or relative this value to take effect. See Length Units
3. Description:
Sets the location of the object relative to the top of its most recently positioned parent object.
The corresponding script feature is: Top. The value is a string, so it is not available for calculations in the script. Use the postop,pixeltop of the Style object, as well as the attributes of the object's offsettop.
///////////////////////
Div is always a select occlusion solution
//////////////////////////
Html>
<meta http-equiv= "Content-type" c>
<title>div is a solution for select occlusion--Script house </title>
<body>
<iframe style= "Position:absolute;z-index:9;width:expression
(this.nextSibling.offsetWidth); height:expression
(this.nextSibling.offsetHeight); top:expression (THIS.NEXTSIBLING.OFFSETTOP); left:expression
(This.nextSibling.offsetLeft); " Frameborder= "0" ></iframe>
<form id= "Form1" method= "POST" >
<div style= "z-index:10;position:absolute;background-
Color:blue;width:100;height:18;overflow:hidden; ">aaaaaaa<br/>bbbbbbb<br/>ccccccc</div>
<select style= "width:200" ><option>test0<option>test1<option>test2<option>test3 </select>
<br/>
<pre>
Div is a more common problem when it is blocked by a select.
Some friends by the content of the div into the iframe or object to solve.
Unfortunately, this will destroy the structure of the page, interaction is not good.
The method used here is:
Although Div directly cannot cover select
But the DIV can cover the IFRAME, and the IFRAME can cover the Select,
So, take an IFRAME as the base of the Div,
This div will cover the select.
</pre>
</form>
</body>
function Install () {
var propertiescount = Chenhao.count ();
var object = document.getElementById (' test ');
var object = document.body;
CreateElement (object,chenhao.name,1);
CreateElement (object,chenhao.email,2);
CreateElement (object,chenhao.website,3);
createelement (object,chenhao[' name '],4);
createelement (object,chenhao[' email '],5);
createelement (object,chenhao[' website '],6);
Document. ("Test"). InnerHTML = Chenhao.name;
document.getElementById ("Test"). InnerHTML = Chenhao.email;
document.getElementById ("Test"). InnerHTML = Chenhao.website;
}
function createelement (object,content,index) {
var div = document.createelement ("div");
Div.setattribute (' style ', ' Position:absolute;top: ' +parseint (index*20) + ' px;left:100px ');
Div.innerhtml=content+ ';
Object.appendchild (DIV);
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
