Could anyone explain to me please why my position:absolute div is not obeying my position:relative div?
I'm sure it's something really simple, but I can't for the life of me see what it is.
I would like to see the position:absolute div (class-2) positioned inside of the position:relative div (class-1).
These are the two class', full link to code below:
div.class-1 {
position:relative;
background-color:#CCC;
width: 500px;
height: 200px;
}
div.class-2 {
position:absolute;
background-color:#C96;
width: 250px;
height: 100px;
top:0px;
right:0px;
}
HTML
<div class="wrapper">
<div class="before">class-before</div>
<div class="class-1">class-1</div>
<div class="class-2">class-2</div>
<div class="after">class-after</div>
</div>
http://jsfiddle.net/craig_wadman/HMwtN/
Hope that all makes sense?
The absolute positioned element must be nested inside the relative positioned element for the desired result:
<div class="class-1">
<div class="class-2">class-2</div>
</div>
Absolute positioning 101: an absolute positioned element is positioned with respect to the closest positioned (relative, absolute or fixed) parent; if there is none then <body> is used (that was the case with your original markup).
Demo here
Its not inside it.
<div class="wrapper">
<div class="before">class-before</div>
<div class="class-1">class-1
<div class="class-2">class-2</div>
</div>
<div class="after">class-after</div>
</div>
DEMO HERE
Your class-2 is not within the class-1. Place the after class-2.
<div class="class-1">
<div class="class-2">class-2</div>
</div>
Related
I'm new to HTML did some research in w3school but not clear about how put image on this three different position on this background image in one div. I marked the position I need to put the image. The div will cover entire page in webkit and moz based browser. Consider any width and height of div. How you fixed position with respect to your considered width and height. I can't put background image to entire html or body or etc. It have to in one div or section only.
<div id="page1" style={"background:url('http://s27.postimg.org/r5v9ymd77/pg3bgl.png');background-size:cover;}">
<span class="">Page 1</span>
<div class="">
<!-- Content Goes Here -->
</div>
</div>
This is a very simple way to achieve that using relative CSS positioning.
You can use a background div, and inside of it place the divs you need.
*{
margin:0;
padding:0;
}
.background{
background:url('http://lorempixel.com/1000/1600/nature');
background-size:cover;
height:100vh;
width:100%;
}
.img1,
.img2,
.img3{
position:relative;
width:300px;
height:150px;
background:url('http://placehold.it/300x150');
}
.img1{
top:20px;
left:350px;
}
.img2{
top:150px;
left: 20px;
}
.img3{
top:350px;
left:150px;
}
<div class="background">
<div class="img1"></div>
<div class="img2"></div>
<div class="img3"></div>
</div>
If you wish you can have a look at multiple images backgrounds, here: http://www.w3schools.com/css/css3_backgrounds.asp
i would set up the html like this:
<div id="navbar">
<div id="image1" style=""></div>
<div id="image2" style=""></div>
<div id="image3" style=""></div>
<div>
<p>Text in navbar</p>
</div>
</div>
For each id "imageX" you could set a background-image then. And with display: inline-block, width and position you can put them where you want.
There are multiple ways to achieve that.
You can set the position of your div to absolute and adjust it to the position you'd like it to be
#div1 {
position : absolute;
left : 100px;
top : 200px;
}
You can also set the position to relativeand have your div placed relatively to its normal position.
You can check this for more information on the position property;
You could insert DIV within DIV. And you could position DIV using the top and left style attributes.
<div id="page1" style="{background:url('http://s27.postimg.org/r5v9ymd77/pg3bgl.png');background-size:cover;}">
<span class="">Page 1</span>
<div id="subpanel_1" style="top:20px; left:102px;>
<!-- Content Goes Here -->
</div>
<div id="subpanel_2" style="top:200px; left:50px;>
<!-- Content Goes Here -->
</div>
</div>
Of course, instead of writing the style definitions inline, better put them in a separate <style>…</style> block.
I've got div that I need to be fixed. Now I want to create two sub-divs inside that div. Is it possible?
What I am trying to get is:
div { position: fixed; }
---------------------
- sub-div1 { position: ??? }
- sub-div2 { position: ??? }
---------------------
I tried another position properties but haven't got that yet.
UPD: solved.
Depending on your inner positioning requirements, either relative or absolute,,, both 'consider' parents position / offset .. -> http://www.w3schools.com/Css/css_positioning.asp
You can definitely nest divs inside of divs.
<div id="div1">
<div id="div2">
</div>
<div id="div3">
</div>
</div>
There are 3 different kinds of positioning absolute, relative and fixed. If you position something as fixed, its positioned relatively to the browser window. Anything else you position inside of that div will be located within, unless its positioned with absolute or something I believe, but that would only be visual, technically in the page structure it would still be inside. But here's an example you can save and try, its by no means an example of style btw.
<html>
<head>
<style>
#div1{
left: 100px;
top:150px;
position:fixed;
background:red;
padding-bottom:10px;
}
</style>
<body>
<div id="div1">
heellloooooooooooooooo<br><br><br><br>
<div style="float:left;background:yellow;">
woooooooooorld
</div>
<div style="float:right;background:blue;">
hahahahahah
</div>
</div>
</body>
</html>
I am using twitter bootstrap, and I have the following code:
<div class="row clearfix">
<div class="col-md-12 column">
<img src="img/map.jpg" id="map" />
<a id="modal-786791" href="#modal-container-786791" role="button" class="btn" data-toggle="modal"><img src="img/pin.png"/></a>
</div>
</div>
CSS:
#map{
position: absolute;
}
#modal-786791 img{
position:relative;
}
I need to put the pin on top of the map. So I positioned the map absolutely and the pin relatively.
The problem is that when I put #map in an absolute positioning, all the content that follows the parent div is overlapping it. Here is a screenshot to show you the result:
What is it that I am doing wrong?
Thanks
What happens if you use z-index:99999; in de css
Applying position:absolute takes the element out of the normal flow, Hence when you absolutely position the map, the static elements following it will act like the map isn't there at all.
Absolutely positioned elements are positioned relative to the relative parent. In the current markup, #map is not a parent of the pin, but a sibling, So add an id to the <div> containing it, for example
HTML
<div class="row clearfix">
<div id='mapContainer' class="col-md-12 column">
<img src="img/map.jpg" id="map" />
<a id="modal-786791" href="#modal-container-786791" role="button" class="btn" data-toggle="modal"><img src="img/pin.png"/></a>
</div>
Then you can position the container as relative (So that it'll stay in normal flow) and pin as absolute.
#mapContainer{
position:relative;
}
#modal-786791 img{
position: absolute;
}
I have a problem in my website
I have a big <div> with brown background and it has no height and have 3 <div> elements inside it, and that big <div> should not have absolute position.
I tried to fix that using float, but when I use float left/right that brown background is no longer visible!
Below is a simple code for understanding my problem :
<div id="bigDiv" style="background-color:brown">
<div id="right"></div>
<div id="midle"></div>
<div id="left"></div>
</div>
You do not need to float the elements, all you need to do is use display:inline-block;
As the float object basically means your box model loses it's height value as it no longer is relative to its parent. If you want to go the float method make sure you put a <br class="clr-b"> where .clr-b { clear:both; }
This might be causes of floating. You could resolve your problem by just applying overflow:hidden; styles to your big div.
Else, you could use clearfix method (clear: both;).
<div id="bigDiv" style="background-color:brown; overflow:hidden;">
<div id="right"></div>
<div id="midle"></div>
<div id="left"></div>
</div>
You can use floats:
http://jsfiddle.net/bKVuc/
#bigDiv {
width: 100%;
overflow: hidden;
}
#right, #midle, #left {
float: left;
width: 33.333%;
height: 100px;
}
Try this:
<div id="bigDiv" style="background-color:brown">
<div id="right"></div>
<div id="midle"></div>
<div id="left"></div>
<div style="clear:both;"></div>
</div>
You can top float by using style:
<div style="clear:both;"></div>
In case the big div is floated with height:auto, the element should be floated in order to stuff the big div. Or the big div acts as if there is nothing in it(height=0), so the background disappears.
I Want to place a div over another div without using height in pixels.I have used this code
<div style="position: relative;height:78px;">
<div style="width:425px;position: absolute;top: 0;left: 0;">
Content for First div
</div>
<div style="z-index:10;position:absolute;top: 0;left: 0;">
Content for Second div
</div>
</div>
The first div content will change dynamically . So is their any way to put height auto some thing like in parent div
both child divs are taken out of the flow, so the parent will have no natural height (which normally is "stretched" by it's children).
since you have pre-loaded data on the first child div, make the second match to it.
HTML:
<div id="parent">
<div id="firstChild">
Content for First div
</div>
<div id="secondChild">
Content for Second div
</div>
</div>
CSS:
#parent{
position:relative;
}
#firstChild{
width:425px;
}
#secondChild{
width:425px;
position:absolute;
top:0;
bottom:0;
}
NOTE: watch out for collisions in your styles, i used ID here. replace accordingly
height: 100% should make it the height of the parent div which is 78px;