position an element on the edge of a div code example
Example 1: absolute css
div{
position:absolute;
top:10px;
left:20px;
right:10px;
bottom:20px;
}
Wondering how to use absolute property within a div simple?
Say you have a div inside a div.
putting first div relative and mentioning second div absolute will do the job
In my early days of css, I wonder the position property with relative and no top
bottom, right left property with it. One day I realized it.
1st)<div class='b'>
<div class="b1">
content
</div>
</div>
<style>
.b {
height: 200px;
width: 200px;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(201, 14, 14);
position: relative;
}
.b1 {
height: 100px;
height: 100px;
width: 100px;
position: absolute;
top: 50%;
left: 50%;
}
2nd)<div class="b1">
content
</div>
<style>
.b1 {
height: 100px;
height: 100px;
width: 100px;
position: absolute;
top: 50%;
left: 50%;
}
1st with reference to the first div
2nd to refrence to the object window
Wondering Why i use div for all my tags, simple due its flexibilty to be an
comman container
</style>
---By Siddharth -a physics undergraduate.
Example 2: html position div
<!DOCKTYPE html> <!-- Start of coding page -->
<html> <!-- Start of html coding -->
<head> <!-- Start of head -->
<title>TITLE<title> <!-- Title -->
<script>
</script>
<style>
</style>
</head> <!-- End of head -->
<body> <!-- Start of body -->
<div id='mydiv' style = "position:relative; left:0px; top:100px;">
Hello!
<!-- Use that style tag to positions things, have a play around with it! -->
</div>
</body> <!-- End of body -->
<html> <!-- End of html coding -->
<!-- Add this line of code next to your id:
style = "position:relative; left:0px; top:100px;"
too let you position divs where you want them, you can even position
them ontop of other divs! -->