<html>
<body>
<style>
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid red;
right:0;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
</style>
</body>
</html>
In my code div relative I wrote right:0; but this box does not move in right corner and still is in left corner.
Seems to be working (if you add margin-left: auto). Other than that being relative right: 0 means moving right from current position. So no reason it would go to right edge. If it was absolute it would have.
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid red;
right: 0;
margin-left: auto;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
<div class="relative">
i am relative
<div class="absolute">
i am absolute
</div>
</div>
Related
Alright so I am trying to a basic overlay over an image but it seems that I am doing something wrong, instead of being width and height 100% of the IMG, it is width and height 100% of the entire page
HTML
<div id="main_BodyNews">
<img src="img/main.png" alt="mainNews" />
<div class="overflow-box"></div>
</div>
And the CSS
#main_BodyNews {
width: 50%;
height: 300px;
background-color: #F2C68C;
margin-top: 50px;
margin-left: 20px;
float: left;
border-radius: 5px;
border: 1px solid #F2C68C;
}
#main_BodyNews img {
width: 100%;
height: 100%;
border-radius: 5px;
background-color: 1px solid #F2C68C;
position: relative;
}
.overflow-box {
position:absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
background-color:rgba(255,255,0,0.5);
width: 100%;
height: 100%;
}
JS fiddle: https://jsfiddle.net/0utbjwo0/
you should add position: relative; to your absolute parent div
#main_BodyNews{
position: relative;
}
#main_BodyNews {
width: 50%;
height: 300px;
background-color: #F2C68C;
margin-top: 50px;
margin-left: 20px;
float: left;
border-radius: 5px;
border: 1px solid #F2C68C;
position: relative;
}
#main_BodyNews img {
width: 100%;
height: 100%;
border-radius: 5px;
background-color: 1px solid #F2C68C;
position: relative;
}
.overflow-box {
position:absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
background-color:rgba(255,255,0,0.5);
}
<div id="main_BodyNews">
<img src="img/main.png" alt="mainNews" />
<div class="overflow-box"></div>
</div>
You can use absolute. It's just that you are setting
width: 100%;
height: 100%;
Remove that and set your margin-top and margin left. You can set your width and height for the actually dimensions of your image. If you do this, you wont have to exactly keep your overlay div within your image div.
Here is an example of one I have made for my site.
#overlay {
margin-top: 60px;
margin-left: 88px;
height: 30px;
width: 85px;
position: absolute;
}
You can temporarily set a background-color for it so that you can get a good idea of where it is placed on your page. Then adjust your margins accordingly.
It's because the position: absolute has top, right, bottom, left value of 0. You don't need to specify the height and width. To make it resize on it's parent size. You need position: relative on parent element.
#main_BodyNews {
width: 50%;
height: 300px;
background-color: #F2C68C;
margin-top: 50px;
margin-left: 20px;
float: left;
border-radius: 5px;
border: 1px solid #F2C68C;
position: relative;
}
#main_BodyNews img {
width: 100%;
height: 100%;
border-radius: 5px;
background-color: 1px solid #F2C68C;
position: relative;
}
.overflow-box {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
background-color: rgba(255, 255, 0, 0.5);
}
<div id="main_BodyNews">
<img src="img/main.png" alt="mainNews" />
<div class="overflow-box"></div>
</div>
Here is the fiddle.
I have two div elements.
<div class="parent">
<div class="child">
</div>
</div>
And CSS code for that.
.parent {
height: 20px;
width: 100px;
background-color: #080;
position: relative;
}
.child {
position: absolute;
width: 80px;
height: 200px;
background-color: #008;
right: -10px;
top: 30px;
}
.child:before {
border-right: 10px solid transparent;
border-bottom: 10px solid #008;
border-left: 10px solid transparent;
top: -10px;
width: 0;
height: 0;
content: "";
position: absolute;
left: 50%;
}
How to position .child:before related to .parent without JS. I know solution with .parent:before, but it is not good for me.
I think this is what you are trying to do.
I think you will find this more robust and scalable.
.parent {
height: 20px;
width: 100px;
background-color: #080;
position: relative;
}
.child {
position: absolute;
width: 80px;
height: 200px;
background-color: #008;
left: 50%;
/* note 50% */
top: 30px;
margin-left: -20px;
/* 2x your arrow size */
}
.child:before {
position: absolute;
border-right: 10px solid transparent;
border-bottom: 10px solid #008;
border-left: 10px solid transparent;
top: -10px;
/* your border size */
margin-left: 10px;
/* your border-size */
width: 0;
height: 0;
content: "";
left: 0;
}
<div class="parent">
<div class="child">
</div>
</div>
You can only position an element absolutely in relation to the closest parent that is itself positioned. In your case, that's .child.
If .child and .child:before are not related in your layout, why not put .child:before in the parent element, either as .parent:before, or as its own element?
Alternatively, if your elements both have fixed widths as in your example, just give the pseudo-element a fixed pixel position as well. Demonstration.
this is my html
a.html
<div class='main'>
<div class="sub1"></div>
<div class="sub2"></div>
</div>
and css:
a.css
.main {
width: 200px;
height: 400px;
margin-left: 100px;
position: relative;
border: 1px solid red;
}
.sub1 {
width: 100px;
height: 100px;
border: 1px solid;
position: absolute;
left: 0px;
}
.sub2 {
width: 50px;
height: 300px;
position: absolute;
top: 30px;
left: 20px;
border: 1px solid green;
}
now I want div.sub1 is relative to the parent div,
and div.sub2 is relative to the browser,
how can I set style to div.sub2?
As per my knowledge there are two possible solution either put second div outside the parent div. In this way .sub2 will not be child of parent div.
Or make second div position:fixed instead of absolute.
.sub2 {
width: 50px;
height: 300px;
position: fixed;
top: 30px;
left: 20px;
border: 1px solid green;
}
Fiddle
You need to set .sub1 position as relative (instead of absolute).
.sub1 {
width: 100px;
height: 100px;
border: 1px solid;
position: relative;
left: 0px;
}
I hope this helps.
I have a problem with positioning HTML divs:
I want to have a top headline with height 50px and a footer with height 40px.
The whole in-between shall be filled with the div "pad" but it does not fill the whole area.
Dont know where my mistake is.
And..btw..Do i really need jquery for this mickey mouse stuff?
</head>
<body>
<style>
body{
margin: 0px;
padding: 0px;
}
#head{
position: fixed;
top: 0px;
height: 50px;
width: 100%;
border: solid black 1px;
}
#pad{
position: relative;
border: solid red 1px;
top: 50px;
width: 100%;
}
#foot{
position: absolute;
border: solid green 1px;
width: 40px;
bottom: 0px;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
var win_h = $(window).height();
console.log(win_h);
$('#pad').height(win_h-90);
</script>
<div id="head" >HEAD</div>
<div id="pad">PAD</div>
<div id="foot">TOOL</div>
</body>
Here's an example using absolute positioning and no jquery:
http://jsfiddle.net/adamfullen/6kqT3/
body{
margin: 0px;
padding: 0px;
}
#head{
position: fixed;
top: 0px;
height: 50px;
width: 100%;
border: solid black 1px;
}
#pad{
position: absolute;
border: solid red 1px;
top: 50px;
bottom: 40PX;
left: 0;
right: 0;
}
#foot{
position: absolute;
border: solid green 1px;
width: 40px;
height: 40PX;
bottom: 0px;
}
Add 100% height for your body and html. Then using calc expression you can assign the height for the pad division.
html,body
{height:100%;}
#head{
position: fixed;
top: 0px;
height: 50px;
width: 100%;
border: solid black 1px;
}
#pad{
position: relative;
border: solid red 1px;
top: 50px;
width: 100%;
height:calc(100% - 90px);
}
#foot{
position: absolute;
border: solid green 1px;
width: 40px;
bottom: 0px;
}
DEMO
How could I center the blue box inside the red one ?
I see that the left side of the blue box is exactly in the middle of the red box, but I would like to center the whole blue box, not its left side. The dimensions of the boxes are not constant. I want to align regardless of boxes dimensions. Example to play with here. Thanks !
HTML:
<div id="rel">
<span id="abs">Why I'm not centered ?</span>
</div>
CSS:
#rel {
position: relative;
top: 10px;
left: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center;
}
#abs {
position: absolute;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
}
If you're able to change the <span> tag to a <div>
<div id="rel">
<div id="abs">Why I'm not centered ?</div>
</div>
Then this piece of CSS should work.
#rel {
position: absolute;
top: 10px;
left: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center; }
#abs {
width: 300px;
height: 200px;
border: 1px solid blue;
margin: auto;
margin-top: 50px; }
I think it's better to use more automation for the enclosed box as less changes would be needed should you change the size of the container box.
You could add left:50px to #abs if that's all you want...
#abs {
position: absolute;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
left:50px;
}
If you are going to define dimensions like that (200px x 300px and 300px x 400px), here's how it can be centered:
#rel {
position: relative;
top: 10px;
left: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center;
}
#abs {
position: absolute;
width: 300px;
height: 200px;
border: 1px solid blue;
margin: 49px 0 0 49px;
}
You can check at my solution here at http://jsfiddle.net/NN68Z/96/
I did the following to the css
#rel {
position: relative;
top: 10px;
left: 20px;
right: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center;
display: table-cell;
vertical-align: middle;
}
#abs {
display: block;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
margin: 0 auto;
}
This should work
#abs {
position: absolute;
left: auto;
right: auto;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
}