Positioning Properties CSS
Keywords:
Attribute
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Location attribute</title>
<style type="text/css">
/*
position
01.relative:Relative position
02.absolute: Absolute positioning, equivalent to parent
03.fixed : Anchor relative to browser
04.static : Default value
*/
img{
position: fixed; /*Fixed location*/
left: 50px;
top: 20px;
}
#a{
position: absolute; /*Absolute positioning*/
top: 20px;
height: 50px;
width: 50px;
background-color: blue;
}
#b{
height: 50px;
width: 50px;
background-color: deeppink;
}
#c{
position: relative; /*Relative positioning*/
height: 50px;
width: 50px;
background-color: green;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<img src="image/cat.jpg" width="50px" height="50px">
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Relative positioning</title>
<style type="text/css">
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
/*
position Properties:
static: Default value, no positioning!
relative:Relative positioning! Relative to your original position! That is, the current position, according to the positioning can be restored to the original position!
Set the relative positioning box, the original position will be left!
*/
#father{
border: 1px solid red;
}
#first{
border: 1px dashed orange;
background-color:orange ;
position: relative;
/*top: 20px;
left: 20px;*/
}
#second{
border: 1px dashed pink;
background-color:pink ;
position: relative;
float: right;
}
#third{
border: 1px dashed yellowgreen;
background-color:yellowgreen ;
position: relative;
}
</style>
</head>
<body>
<div id="father">
<div id="first">Box 1</div>
<div id="second">Box 2</div>
<div id="third">Box 3</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Pattern connection</title>
<style type="text/css">
div{
width: 300px;
height: 300px;
border: 1px solid red;
padding: 10px;
}
a{
display: block;
height: 80px;
width: 80px;
background-color:pink ;
text-decoration: none;
text-align: center;
line-height: 80px;
}
#a2,#a4{
position: relative;
left:180px;
top: -80px;
}
#a5{
position: relative;
left:90px ;
top: -240px;
}
a:hover{
background: blue;
text-decoration: underline;
color: deeppink;
}
</style>
</head>
<body>
<div id="box">
<a href="#"Id =" A1 "> link 1</a>
<a href="#"Id =" A2 "> link2</a>
<a href="#"Id =" A3 "> link3</a>
<a href="#"Id =" A4 "> Link4</a>
<a href="#"Id =" A5 "> link 5</a>
</div>
</body>
</html>
/*
position property:
static: default value, no location!
Relative: relative positioning! Relative to your original position! That is, the current position, according to the positioning can be restored to the original position!
Set the relative positioning box, the original position will be left!
Absolute: absolute positioning: it is based on the located parent element closest to the current element!
If the parent element has no positioning attribute set, the browser will prevail!
After the location of the element changes, it breaks away from the standard document flow! Its original position will not be preserved!
Fixed: fixed location! Relative to browser!
z-index: set cascade! The higher the value, the closer it is to us! Invalid for element without setting position attribute!
*/
Posted by samoi on Tue, 04 Feb 2020 08:09:12 -0800