I need to make scrollable element with absolute positioned element inside and some big element for scrolling.
.container{
width: 200px;
height: 200px;
position: relative;
overflow: scroll;
border: 1px solid red;
}
.content{
height: 300px;
background: green;
}
.wtf{
top: 0px;
position: absolute;
height: 10px;
width: 100%;
background: red;
}
<div class="container">
<div class="content">
</div>
<div class="wtf"></div>
</div>
http://codepen.io/anon/pen/pvKwvZ
In this example I need to keep red element inside of green square after scrolling to bottom.
Your .container is set to position: relative. That's why the .wtf-Element moves along with the .container-Element! The .container becomes the reference object for the .wtf-Element because of the position: relative.
To have the .wtf-Element fixed, your could remove the .container position: relative (or replace it by the default position: static), or ...
another approach would be to set the .wtf position: fixed. Again, this would position the .wtf-Element relative to the "outer html", not relative to the .container.
Related
I have 3 divs on top of each other having following css.
.d1 {
position: relative;
background-color: yellow;
height: 50px;
width: 100px;
overflow: hidden;
}
.d2 {
position: absolute;
background-color: green;
height: 25px;
width: 50px;
}
.d3 {
position: absolute;
left: 83px;
}
and the divs that have classes are as follows:
<div class="d1">
<div class="d2">
<div class="d3">text</div>
</div>
</div>
and as a result I see content of d3 cut off because of overflow:hidden in d1.
How can I avoid cut off content of d3 without modifying d1?
Getting around the overflow..
An element can overflow from a relative or absolute positioned parent by setting its position to fixed. An element that has position: fixed will have the default left,right,top, and bottom styles set as auto. This will position .d3 to the top-left of .d2, and then the left: 83px style will push it to the left from there.
Making up the additional space..
However, to get that additional movement to the right as the original markup, you will need to add margin-left: 8px, which will make-up the additional ~8px needed to replicate the original. Further adjustments to the position of .d3 will need to be done by setting the margin style (see below).
Your updated code should look like this..
.d1 {
position: relative;
background-color: yellow;
height: 50px;
width: 100px;
overflow: hidden;
}
.d2 {
position: absolute;
background-color: green;
height: 25px;
width: 50px;
}
.d3 {
position: fixed;
margin-left: 8px;
left: 83px;
}
Some considerations and caveats..
As a previous commenter mentioned, best practice would be to fix your html markup because this solution could cause issues if you ever need to move the position of .d3. For example, setting left,right,top, or bottom will cause the default setting of this style, auto, from being unset, and the element will be positioned relative to the viewport rather than the parent relative or absolute element.
I have an absolute div stuck to the bottom of a relative div. All i want to do is to make the inner div scrollable (upwards) whenever its size gets bigger than the outer div.
But that does not happen. The div doesn't get scrollable! Here's the fiddle: https://jsfiddle.net/xggjmjqc/
HTML:
<div class="mobile1">
<div class="bottom1">
</div>
</div>
<br><br>
<!-- when inner gets bigger than outer: -->
<div class="mobile2">
<div class="bottom2">
</div>
</div>
CSS:
.mobile1{
height:400px;
width: 300px;
background-color: red;
position: relative
}
.bottom1{
height:100px;
width: 300px;
position: absolute;
bottom: 0;
background-color: blue;
}
/* when inner gets bigger than outer: */
.mobile2{
height:400px;
width: 300px;
background-color: red;
position: relative;
overflow-y: scroll;
}
.bottom2{
height:500px;
width: 300px;
position: absolute;
bottom: 0;
background-color: blue;
}
Using a position absolute takes an element out the document flow, meaning it is there, but is "independent" from the other element.
Using position relative will make the outer div respond to the inner and your scroll will appear.
.bottom2{
height:500px;
width: 300px;
position: relative;
bottom: 0;
background-color: blue;
}
fiddle: https://jsfiddle.net/djwave28/xggjmjqc/3/
edit
With some javascript set scroll to bottom:
https://jsfiddle.net/djwave28/xggjmjqc/6/
it's a known 'bug' that elements with fixed position loose their position if the container is translated. For example, if i've got a structure like this:
<div class="container">
<div class="fixed"></div>
</div>
and, say, the container is scrolled, when the conteiner gets transformed (say, translate(x,y), rotate(), or so..), then the fixed element behaves like it was positioned relative and it scrolls with the container. I can see it on the latest firefox, for example.
How can one fix this kind of problem? Is there any way?
This behaviour is not a bug. It's actually the specs recommended behaviour.
(See this post by Eric Meyer, or this question here on SO which accepted solution only provides a link to the same meyer's post)
For those who don't know this issue, and because you didn't provide a snippet into your question, here's one.
document.addEventListener('click', function() {
document.getElementById('container').classList.toggle('transformed')
}, false);
#bg {
border: 1px solid #AFA;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
#container {
border: 1px solid #FAF;
height: 50%;
width: 75%;
position: relative;
margin: 0 auto;
overflow: auto;
}
#content {
background: rgba(125, 175, 0, .7);
position: fixed;
width: 100%;
top: 0;
left: 0;
}
.transformed {
transform: translate(0, 5em);
}
<div id="bg">
<div id="container" class="transformed">
.<br>.<br>.<br>.<br>.<br>.<br>.
this is a scrollable paragraph
<br>.<br>the "fixed" content does scroll with the paragraph
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
you can click to toggle the transformation On/Off
<br>.<br>.<br>.<br>.<br>.
<span id="content">relatively fixed content</span>
</div>
</div>
However, I did find something that may help others facing the same issue.
It's not really a solution, since the "fixed" element will be only inside the container, (except for IE browsers where it will really be fixed to the document). But in my case, it's actually what I wanted and maybe it'll be fine for others too.
If you add a wrapper, set its height:100%; width:100%; and overflow:auto, then your "fixed" content won't scroll with the container.
Actually it's not you container which scrolls anymore, but the wrapper. So you might want to set the container's overflow:visible or hidden to avoid unwanted scrolling of the not so well "fixed" element.
Also, note that you need your wrapper be a block or inline-block element.
#bg {
border: 1px solid #AFA;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
#container {
border: 1px solid #FAF;
height: 50%;
width: 75%;
position: relative;
margin: 0 auto;
overflow: visible;
}
#wrapper {
height: 100%;
width: 100%;
overflow: auto;
}
#content {
background: rgba(125, 175, 0, .7);
position: fixed;
width: 100%;
top: 0;
left: 0;
}
.transformed {
transform: translate(0, 50%);
}
<div id="bg">
<div id="container" class="transformed">
<div id="wrapper">
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
<span id="content">relatively fixed content</span>
</div>
</div>
</div>
I am not familiar with this bug, but when you use positioned: fixed; the element is positioned relative to the browser window, so it doesn't really make any sense to put it inside a container.
This markup would be my recommendation:
<div class="fixed"></div>
<div class="container"></div>
Once you use position: fixed; on any element it is positioned relative to the view-port. Directly from page in MDN about position property.
fixed
Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled.
So what you are experiencing is a what it is actually supposed to work like and not a 'bug'.
Now if what you want is something that is positioned with relation to the .container div and translate with it than you will have to use absolute positioning here. Take a look at this fiddle. The important CSS is-
.container {
width: 200px;
height: 100px;
position: relative;
}
.absolute {
position: absolute;
width: 20px;
height: 10px;
top: 50px;
left: 50px;
}
Notice that with positioning the inner div as absolute I have also positioned the outer div as relative as the inner div takes its position in reference to the closest parent div positioned as anything different from static.
How to make the <div> inside wrapper bigger than wrapper itself without change the structure?
HTML
<div class="page row1">
<div class="home-wrapper row2">
<div class="home-slider row3"></div>
</div>
<div>
CSS
.page { width: 100%; height: 400px; border: 1px solid #000; background: #eee; }
.home-wrapper { width: 90%; height: 400px;border: 1px solid red; background: #ccc; margin: 0 auto;}
.home-slider{ width: 100%; height: 200px; border: 1px solid blue; background:#000; }
http://jsfiddle.net/46vpqmgh/1/
I want the black box is same width with the page <div> without change the structure, using only CSS.
Thanks
Add:
position: absolute to .home-slider to pull it out of the normal flow
top: 0 and left: 0 to .home-slider to position it correctly
position: relative to .page to make it's children absolute positioned elements relative to it
Percentage height and width will be calculated based on the size of .page.
Have a fiddle!
Added CSS
.page {
position: relative;
}
.home-slider {
position: absolute;
left: 0;
top: 0;
}
Read more about the CSS position property over on the MDN
Absolute positioning
Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements. The absolutely positioned element is positioned relative to nearest positioned ancestor. If a positioned ancestor doesn't exist, the initial container is used.
In our example above, the nearest positioned "ancestor" is .page
Add the following properties. Looks fair to me.
.home-slider {
/* ... */
z-index: 1;
margin-left: -5%;
position: fixed;
}
Change the following class:
.home-slider {
width: 100%;
height: 200px;
border: 1px solid blue;
background:#000;
position: absolute;/*Add position absolute*/
left: 0;/*Add left to 0*/
}
fiddle
I am trying to put simple divs and arrange them, but my child div disappearing from parent div even though I am using parent div with relative and child div with absolute positioning. I want connect_us_01 and registeration divs insideheader_block1. I am working towards responsive webdesign. Many thanks.
JSFiddle
<div id="header">
<div id="header_block1">
<div id ="registeration">reg</div>
<div id ="connect_us_01">social media</div>
</div>
<div id="header_block2">
<div id="crown_logo">logo</div>
<div id="nav">navigation</div>
<div class="contact_No_01">020324234233</div>
</div>
</div>
css
#header {
position: relative;
width: 100%;
background-color: #ff6a00;
}
#header_block1 {
position: relative;
margin: 0 auto;
width: 90%;
background-color: pink;
}
#header_block2 {
margin: 0 auto;
width: 90%;
position: relative;
background-color: aqua;
}
/*----social media & connect us block*/
#connect_us_01 {
position: absolute;
width: 300px;
height: 50px;
right: 0;
background-color: blue;
}
#registeration {
position: absolute;
left: 1px;
width: 200px;
height: 50px;
background-color: brown;
}
Elements with position: absolute are taken out of the content flow, meaning they have no inherent height. Since the children have no height, the parent gets no height either, rendering the children invisible. You could resolve it by giving the parent a static height (as in, for instance, height: 100px), but that's not very practical and not responsive at all.
What you're looking for isn't position: absolute; it's float: left and float: right. Apply those properties to the children and give the parent overflow: hidden (or whatever method of clearing floats works best with your layout) and it'll work just fine.
To show block you refering to just add to #header_block1 a height parameter also.
#header_block1 {
position: relative;
margin: 0 auto;
width: 90%;
height: 50px;
background-color: pink;
}