I have a css animation, which makes a div go under another div. DIV 1 goes under DIV 2. If I make DIV 2 absolutely positioned, the page will break in pieces. But if I don't make the DIV 2 absolutely positioned, the DIV 1 will not go under it, buy stay at the top of the div.
You can check it out live here
This is how it looks without making the right content absolutely positioned.
If you hover your mouse over the map, you will see the transition.
Any helpful solutions of getting rid of this? I would really appreciate.
Thanks in advance.
That is why it don't work, your parent div has to have position to child div position take effect.
.div1, .div2{
position:relative;
}
.div3{
position:absolute;
}
Take a look here: https://css-tricks.com/absolute-positioning-inside-relative-positioning/
Make Div 2 be position: relative so that it stays in the flow. See How to make div's percentage width relative to parent div and not viewport
From that answer:
Specifying position:relative; or position:absolute; on a node means that it will be used as the reference for absolutely positioned elements within it http://jsfiddle.net/E5eEk/1/
I managed to make it work:
#content {
position: relative;
}
.info {
z-index: 0;
position: relative;
}
To make the #content to be the top layer add z-index with a higher value with the other div.
Take note, z-index doesn't work if you don't set your div position:absolute or position: relative
#content {
position: relative;
z-index: 3;
}
Related
Here is a jsfiddle:
https://jsfiddle.net/mcgfhL10/
#description{ /*Just a breif description of the product. */
font-family:"microsoft sans serif";
font-size:22px;
position:relative;
overflow-y:scroll;
bottom:40px;
width:400px;
height:150px;
background:black;
}
I would like the div with id description to fall to the bottom of the div with id shelf. However, it falls to the bottom of the image, which is a sibbling? how is this working?
The problem with your code is that your description is positioned relatively and your parent has no positioning set at all. This means that the description basically doesn't know that it lives inside the shelf and is instead calculating its position relative to the image, which is the closest element. (If you set the bottom: 40px to 0px in description, you will notice that it will sit snugly under the image).
You have to make the child absolute and the parent relative. If you position a child element relative and then set the child bottom to 0px, it won't stick either. You're basically telling it to not move anywhere. (Relative means relative to its current center).
Here is a demo for reference: jsFiddle Demo
.shelf {
position: relative;
}
.description {
position: absolute;
}
I strongly suggest you read up on CSS positioning and display before you go any further. It will help you a lot if you know the foundations well.
CSS Tricks
A List Apart
Your description needs to be positioned absolute, because it is not relative to the other elements, but absolute within the parent container. You also need to move your description div on top of the image.
So your HTML becomes:
<div id="description"><p>foobar</p></div>
<img id="image" src = "image.jpg">
and your CSS addition is:
#description{
position: absolute;
}
Here's a fiddle: https://jsfiddle.net/jgghpcmy/1/
I am trying to have an arrow fixed to the bottom of a div section , but for some reason its not working ,
here is my html code:
<section>
<div style="margin:auto; text-align: center; position:relative; width:61px">
<a class="scroller-arrow" href="#offset2"></a>
</div>
</section>
The CSS code :
section {
padding: 10%;
margin: 0 auto;
background-image: url("/images/text-bar-strip.png");
background-repeat: repeat-x;
height: 393px;
}
.scroller-arrow
{
background-image: url("/images/down-arrow.png");
cursor: pointer;
display: block;
height: 61px;
margin: 0 auto;
width: 61px;
position:fixed;
bottom:-11px;
}
its always showing at the bottom of my screen not the bottom of the section ?
Could you help me much appreciated :)
After clearing things up in the discussion, I believe this is what you're looking for: http://jsfiddle.net/WBF6s/
Changes include:
Removing the div.
Setting position:relative on the section.
Setting the a to be position:absolute and display:inline-block.
Setting the a to left:0, right:0, bottom:0, and margin:0 auto.
position:fixed, places the element relative to the window.
With position:absolute, the element will be moved relative to the nearest positioned parent, which means that the container must have itself a position property set.
What we usually do is make the container relatively positioned, by setting its position property to relative.
So, you should make your section or your div relative, and your arrow absolute.
as an FYI, position:fixed is reserved for placing an element on the screen regardless of the other elements there. It will fix itself to the window no matter what. If you would like it to be stuck at the bottom (or top or anything) of an element, you need to use position:absolute. The caveat with position:absolute is that you will always need its parent to have a position on it. The most non-destructive way is to give your parent position:relative and this will make sure that the parent is always in the same spot.
I've made a very quick jsfiddle to show you what's wrong:
http://jsfiddle.net/AuGe2/
When you want to position something to the bottom of an element, you need it to be
.arrow{
height:40px;
width:40px
position:absolute;
bottom:0;
left:50%;
margin-left:-20px //Or half the width of the element
}
Notice the left:50% and margin-left:-20px This is what centers an absolute element in a box. You are moving the element 50% of the way over of the parent's width, then you need to back-track a bit because it's moving the left-most side of the element. You backtrack by subtracting the same margin at half the size of the element. You can do the same with top as well.
I have a structure where there are many relative position div and inside them another div with position: absolute. Now I want to show this absolute position div on top left corner of screen, covering full screen for mobiles as overlay or dialog and user also able to scroll this, overlay or dialog can have forms.
Fixed position is not solution.
How I can do that ?
<div class="relative">relative
<div class="absolute">absolute</div>
.relative {
position:relative;
margin-top:500px;
}
.absolute {
position:absolute;
top:0
}
EDIT: JSFIDDLE
People are very quick at down vote :) slow at suggestion
Update:
i can't use negative margin because i don't know the location of the relative div it can be anywhere in document and i can't make it direct child of the body
Just counter the positioning the .relative element has. Here your .relative element has a margin-top of 500px, so we can make our .absolute element appear 500px above by specifying a top of -500px:
.absolute {
position:absolute;
top:-500px;
}
JSFiddle demo.
Is this possible using CSS only? I can't find a definitive answer anywhere!
It's for a left and right nav bar I'd like to stretch to 100% height; i.e. the end of the page. There are three floated columns contained within a floated container that stretches 100% height, I just can't get the childs to stretch...
http://www.dev.inside-guides.co.uk/brentwood/pages/links.html
Thanks in advance for any replies.
It can be done, if you set its parent div container position to relative as follows
#container {
position: relative;
}
and then set the div you want to be 100% and position absolute as follows
#inner {
height: 100%;
position: absolute;
}
this is how I've done it, hopefully I haven't missed anything :)
I had this problem before.
Try adding:
html{
height:100%;
}
Make sure the parent div has a set height and the div itself is also height:100%;
If you have any trouble let me know :)
please see my fiddle: http://jsfiddle.net/qVHg8/1/
Why isn't the fixedRightCol being positioned at right:0 of the outer container div? Right now it's going outside of the container div which I don't want.
I could use position absolute, which puts the fixedRightCol in the right position but scrolls. I want the fixedRightCol to be fixed (no scroll).
so how can I get fixedRightCol position correctly and fixed on scroll?
Thanks
If you want the green div to be fixed inside the red div, you need to use position: absolute;
http://jsfiddle.net/qVHg8/2/
position: fixed; fixes the element to the viewport, rather than the parent.
EDIT:
If you're able to use a bit of javascript & jQuery, then this will work with your dynamic margins:
$(function(){
$('.fixedRightCol').css({right: $('.container').offset().left});
});
What thats doing is setting the right CSS property to be the calculated left property of the container. As the margins are the same on both side (auto), then this will shit the red div to the correct position.
http://jsfiddle.net/qVHg8/4/ is a working example of this.
When you give something a position fixed, it breaks out of any divs it may be in.
Edit:
You could just do this:
.fixedRightCol{
position: fixed;
margin-left: 350px;
width: 50px;
background: green;
}
Use margin-left: 350px; for green box with NO right: 0px; or anything...
i think you are meaning to use position:absolute;