position property

-> specifies type of positioning method used for an element

3 commonly used elements...

1/ absolute >> is positioned relative to the nearest positioned ancestor...
// instead of position relative to the viewport, like fixed!!
checklist
-> position relative, width, height
-> then... position absolute, top, right, width, height

<style>
div.relative {
	position:relative;
    width:300px;
    height:200px;
    border: 3px solid red;
}
div.absolute {
	position:absolute;
    top:80px;
    right:0;
    width:200px;
    height:100px;
    border: 3px solid blue;
}
</style>
    



**2/ relative**  >> set properties like top, right, bottom, left, causes to position away from its normal position
_** checklist **_
	left: px;
<style>
.relative{
	position:relative;
    left:30px;
	border:3px solid red;
}
</style>


           

**3/ fixed**  >> position:relative

## inline, inline-block, block

profile
30기 신윤숙 / FE

0개의 댓글