CSS relative and absolute position
Last lesson we began discuss elements position, concretely we learnt about fixed position (position:fixed;). In this lesson we’ll discuss relative and absolute position.
It is important to remember about elements relationship (parent and child elements).
Relative position is typical for parent elements. it doesn’t change visualization of html page (if you don’t set positions).
If element has got absolute position, it set its position relative to parent. If parent element hasn’t got relative position, child element set its position from body element.
In this lesson we also discussed z-index. Z-index is a layer. Z-index doesn’t work without position rule. Also z-index can’t assign negative value.
If element has got absolute position, it set its position relative to parent. If parent element hasn’t got relative position, child element set its position from body element.
In this lesson we also discussed z-index. Z-index is a layer. Z-index doesn’t work without position rule. Also z-index can’t assign negative value.
Code lesson (HTML)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</body>
</html>
Code lesson (CSS)
.one, .two, .three {
width: 200px;
height: 150px;
}
.one {
background-color: red;
position: absolute;
z-index: 2;
}
.two {
background-color: green;
position: absolute;
z-index: 5;
top: 10px;
left: 20px;
}
.three {
background-color: blue;
position: absolute;
z-index: 3;
top: 20px;
left: 40px;
}
#wrapper {
width: 1000px;
margin: 0 auto;
border: 1px solid #000;
height: 450px;
position: relative;
}
0 Comments