Last active
July 13, 2017 08:30
-
-
Save rambhairao/027f4887f5cb4b69628c7057bb63f7d2 to your computer and use it in GitHub Desktop.
JS Bin// source https://jsbin.com/cufacag
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
whenever we made a block relative positioned | |
then it would be change it's position(LEFT RIGHT TOP BOTTOM and Z-INDEX ) relatvie to own position..... | |
and it's right position properties will only work when we add width of it;s parent positioned element.... |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>JS Bin</title> | |
<style id="jsbin-css"> | |
.a{ | |
width:200px; | |
height:50px; | |
padding-top:20px; | |
background-color: yellow; | |
margin-left:20px; | |
margin-top:10px; | |
} | |
.b{ | |
width:200px; | |
height:50px; | |
background-color:orange; | |
padding-top:20px; | |
margin-top:20px; | |
} | |
.c{ | |
width:200px; | |
height:50px; | |
background-color:red; | |
} | |
.d{ | |
width:90px; | |
background-color:blue; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="a"> Hey ooly good bye</div> | |
<div class="b"> Hey ooly good bye | |
<div class="d"> Hey ooly good </div> | |
</div> | |
<div class="c"> Hey ooly good bye</div> | |
<script id="jsbin-source-css" type="text/css">.a{ | |
width:200px; | |
height:50px; | |
padding-top:20px; | |
background-color: yellow; | |
margin-left:20px; | |
margin-top:10px; | |
} | |
.b{ | |
width:200px; | |
height:50px; | |
background-color:orange; | |
padding-top:20px; | |
margin-top:20px; | |
} | |
.c{ | |
width:200px; | |
height:50px; | |
background-color:red; | |
} | |
.d{ | |
width:90px; | |
background-color:blue; | |
}</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.a{ | |
width:200px; | |
height:50px; | |
padding-top:20px; | |
background-color: yellow; | |
margin-left:20px; | |
margin-top:10px; | |
} | |
.b{ | |
width:200px; | |
height:50px; | |
background-color:orange; | |
padding-top:20px; | |
margin-top:20px; | |
} | |
.c{ | |
width:200px; | |
height:50px; | |
background-color:red; | |
} | |
.d{ | |
width:90px; | |
background-color:blue; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment