Basically, I have 3 absolutely positioned elements within a relative container, one of them with left: 100% (the one coming next) and one with left: -100% (the previous picture). They transition between the available places automatically with the transition property. The final result of this can be seen here.
<div id="slideshow">
<article>
<img>
</article><article>
<img>
</article><article>
<img>
</article>
</div>
<style>
div#slideshow { position: relative; overflow: hidden }
img { width: 100%; height: auto }
article { width: 100%; position: absolute; transition: left 1s }
article.current { left: 0 }
article.prev { left: -100% }
article.next { left: 100% }
</style>
(This is the result without overflow: hidden applied, to see how the slideshow works.)
As you can see, the <img>s are responsive to their parent, <article>. I know that block elements always take the available width, so I didn't think I had to state it, but as you can see, I had to specify width: 100% on the <article>, too. What happens if I don't? Something interesting, I'd say.
The .prev <img> turns twice as big as the others, and the .next <img> renders at size 0x0. What? You clearly see that all the image should have the same dimensions: 100% width, and auto height.
What I wanted to understand is; why does the CSS work like it does? I find this result quite unexpected, so I really wanted some kind of a discussion on why the result returns what it does, so that I could better understand how the underlying components of the CSS values actually work.
Your problem is not in the images themselves, but on the article.
It's the article elements that are ruling the dimensions, and image gets the dimensions from them.
The width of the article is not set. Lacking that, and in the presence of a left statement, a value of right 0px is assumed. So, when left is 0, the width is 100% of the container, when the left is -100% the width is 200%, and when the left is 100%, the width is 0.
How to solve this ?
Add a width: 100% to article. - the direct solution.
Instead of moving the articles with the left property, do it with a transform: translateX(-100%); You won't have the problem derived from changing left, and it is more performant
Related
Please visit my website at http://amrapps.ir/personal/indexbug.html
to visually see my problem.
Let me explain my problem:
In my website i have a fixed postion div which contains links and i takes and it takes 25 % of browser height.
Then it is the red div which takes 75 % of browser width.
When user clicks on -CLICK THERE TO READ MORE- in red div,it will be redirected to the next(yellow colored) div which takes 100 % of browser height.
Then you can click on go to top on the fixed div above to get back to red div.
Navigations are working well but there's a problem.
When you are at the 2nd(yellow) div,if you change browser width,the red div will be also visible! How can i fix that?
thank you for your effort.
Change your #aboutmore class to the below css:
#aboutmore {
background-color: #FFCE85;
margin-top: 5px;
top: 25%;
position: absolute;
/* height: 74%; */
width: 100%;
min-width: 1130px;
bottom: 0px;
z-index: 3;
}
Theres a couple of things going on here, and I'm not 100% of the result you want to accomplish, but we are working with CSS heights here so you need to keep some things in mind.
First of: when working with css heights, you need to make sure that all wrapping elements get the height of 100%. Including your body AND html tags. Without this, your body will just have the height of the elements inside it, and your 100% divs will do it to.
Second, you should turn of the body 'overflow: hidden' attribute, as it just obstructs correct testing.
Now, like I said, I'm not sure what you're trying to accomplish, but your header should be taken out of the wrapper as it is fixed. This will allow your wrapper to become the scrollable area. You also mentioned you wanted the second div to be 100% heigh and the first one 75%. Now, with position fixed this would mean your yellow div is only 75% visible, with 25% hidden (either by being off screen or under the header). If you want the first div and header together to take up 100%, and any subsequent div to take up 100% on their own, you should position all elements relative and not fixed.
I'm going to add some code here to help with a fixed header:
div#page-wrap {
height: 75%;
position: absolute;
top: 25%;
width: 100%;
overflow: scroll;
overflow-x: hidden;
}
about,
#aboutmore {
height: 100%;
position: relative;
top: 0%;
}
Now this will break your javascript (as you can't actually scroll the body), although I couldn't get it working in the first place anyhow. You'll find more about scrolling inside a div (as now you need to scroll in your wrapper element) in this thread: How do I scroll to an element within an overflowed Div?
I have a series of containers, all set to height 100% starting from 'body'.
I set 'article':
article {
width: 100%;
height: 50%;
margin: 0;
margin-top: 25%;
padding: 0;
}
The height works fine taking half of its parent's (or screen, doesn't matter) height, but the margin-top is definitely not 25%, more like three times it.
Live link: http://no-plans.com/temp/wp-tobias/wordpress/?p=51
Disclaimer: still dirty stylesheet, there might be inherited conflicts but I can't find any. I also tried to resize and put the margin to other parent divs, same issue.
As stated in the comment, margin percentages are relative to container's width: http://w3.org/TR/CSS21/box.html#margin-properties.
You can solve by absolute positioning and top (here the percentages are relative to container's height).
I have a fixed position element inside a relatively positioned element, as far as I'm concerned the position: relative element shouldn't have any effect on the position: fixed (fixed elements are positioned relative to the window, right?).
However, the fixed elements z-index seems to be inherited by it's parent, to the point where it's z-index can be no higher than its parent's z-index.
I hope I'm making sense? Below is a HTML example of what I'm talking about:
.outer {
position: relative;
z-index: 2;
}
.inner {
background: #fff;
left: 50px;
position: fixed;
top: 40px;
z-index: 1000000;
}
.fade {
background: #555;
bottom: 0;
left: 0;
opacity: 0.5;
position: fixed;
right: 0;
top: 0;
z-index: 3;
}
<div class="outer">
<div class="inner">testing testing</div>
</div>
<div class="fade"></div>
If you change the following:
.outer { position: relative; z-index: 4; }
Then the .inner element appears in front of the fade element.
I find this behaviour very peculiar... is there a way of working around this without moving the .inner div, or changing the CSS of the .outer div?
Fiddles of above code samples:
http://jsfiddle.net/n2Kq5/
http://jsfiddle.net/U8Jem/1/
In short, yes, an element with position:fixed is limited by its parent's z-index given the parent's z-index is defined.
Sad to inform you, but what you want is not currently possible. The only way you can get the effect you desire is to change your HTML or remove the z-index from outer.
Changing HTML options
The first option is to move inner outside of outer, which would look like this.
The second option for an HTML fix is to move fade inside of outer (using the same CSS even) - demo of that here.
A third option would be to put fade inside of outer and then also put inner inside of fade, but that requires you to use rgba colors and opacity - that demo is found here.
Changing CSS options
The closest thing you can get using the same HTML you have currently is to remove the z-index of outer - Demo here. You would think that you could simply increment each element's z-index by two, but that does not work due to the fact that children elements cannot have a higher z-index than their parents (if the parent's z-index is set).
Explanation
If you think about it, fade and outer are on the same level. What you're trying to do is have fade remain on that same level but also have it be on the level above, which is impossible. It's like trying to be on two floors of a building at once, it can't be done.
Although what you need is not directly related to this article, Philip Walton created a great post on z-indexes and the effect opacity has on them, which could be useful to others looking at this question.
I have a div which i want vertically aligned to 50% of the height of the browser window at all times.
I don't know what the height of the browser window is going to be at all times, should the user scale this window. If placing it within another element is necessary, great, but as just specified, I have no idea how tall the viewport is going to be at any one time.
I'm not going to be using javascript either.
I have read through the site, i have gone hunting for a solution, but I really want to throw this out there (again) as I have yet to find a solution that does exactly this, either by hook or by crook.
Thanks.
You don't specify if the has a fixed height or not? If so then you can do this with one element, just add the following example CSS:
.centered {
height: 100px;
width: 100%;
background: red;
position: absolute;
top: 50%;
left: 0;
margin-top: -50px; /* half the height of the element */
}
You could use a number of techniques, depends on how you exactly want to implement it. Some (older) but still relevant reading here.
I've been writing CSS for quite some time now.
I've noticed that
<div style="position: relative; right: 20%; bottom: 20%;">some text</div>
never works!
relative positioning would work with left and top specified but not with right/bottom. Why?
A quick fix around this is to use "absolute" instead and specify right/bottom in pixels, but I need a reason.
Also, correct me if I'm wrong. Irrespective of whether the external container is positioned absolutely or relatively, does it not make much sense to position something "relative" to the boundaries of that container or should elements inside a container always be positioned "absolute"?
Thank you.
From Absolute vs. Relative - Explaining CSS Positioning
Relative positioning uses the same four positioning properties as absolute positioning. But instead of basing the position of the element upon the browser view port, it starts from where the element would be if it were still in the normal flow.
Relative positioning does work with bottom/right values, just not the way you were expecting:
http://cssdesk.com/RX24j
Think about the position values on relative elements as margins, that the surrounding elements simply ignore. The "margins" will always move the element relative to it's previous position in the normal document flow, but remove it from the normal flow at the same time.
When out of the normal document flow, the surrounding elements act as if it were in it's original position in the normal flow... but it's not. This is why a relative element can overlap it's parent (like in Rel 1).
Did you try this?
<div style="position: relative; right: -20%; bottom: -20%;">some text</div>
or rather
<div style="position: relative; right: -80%; bottom: -80%;">some text</div>
not recommended :
left : 0% //will set it to left
left : 100% //will set it to right => you need to get the width of the element and subtract it using calc ( 100% - width)
To people visiting this old post...
if the element that you are trying to position inside something else has a width or height that is larger than the outer element. The position will ignore left, right, bottom, left.
give it width/height auto.
that was the problem that I had. Hope it helps you too!
remove position left, right, top, bottom from the parents element
and put it in the child as you want
.parent_class
{
background: #ff0000 ;
position: absolute;
transition: 0.8s ease-out;
left:0; //" remove this from here"
top:0; // " remove this from here"
z-index: -1;
}
.child_class
{
width: 0px;
height: 70px;
right: 0; //"now it will work"
bottom: 0;//"now it will work"
}