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/
Related
I want to fix an element to the top and left of the screen using position sticky when scrolling a large div either vertically or horizontally. Fixing to the top is working fine, but fixing to the left is not.
This is my html page:
.sticky {
position: -webkit-sticky;
position: sticky;
left: 0;
top: 0;
}
.scroll-horizontally-and-vertically {
width: 4000px;
height: 2000px;
background-color: lightblue;
}
<div>
<div class="sticky">
<h1>please stick to top and left</h1>
</div>
<div class="scroll-horizontally-and-vertically"></div>
</div>
I also tried using either top or left alone, with the same result.
I must be missing something.
Why is the top position fixed, but not the left position?
How should I fix the page to get the desired behaviour?
The sticky element is a block level element inside another block level so this one is already taking 100% width if its parent element and there is no room for a left sticky behavior.
Add some border to better see:
.sticky {
position: -webkit-sticky;
position: sticky;
left: 0;
top: 0;
border:2px solid green;
}
.scroll-horizontally-and-vertically {
width: 4000px;
height: 2000px;
background-color: lightblue;
}
<div style="border:2px solid red;">
<div class="sticky">
<h1>please stick to top and left</h1>
</div>
<div class="scroll-horizontally-and-vertically"></div>
</div>
The green box can only stick inside the red one and the lightblue element is overflowing. Addinline-block to sticky element (to remove the width 100% constraint) and to the parent element (so it grows with the lightblue element) and you will have the expected result
.sticky {
position: -webkit-sticky;
position: sticky;
left: 0;
top: 0;
border:2px solid green;
display:inline-block
}
.scroll-horizontally-and-vertically {
width: 4000px;
height: 2000px;
background-color: lightblue;
}
<div style="border:2px solid red;display:inline-block;">
<div class="sticky">
<h1>please stick to top and left</h1>
</div>
<div class="scroll-horizontally-and-vertically"></div>
</div>
Erit Vortstenbosch Welcome to the community. I have checked your code its working fine.
Just set margin and padding to 0 for h1 tag.
Here is the modified code snippet.
.sticky {
position: -webkit-sticky;
position: sticky;
left: 0;
top: 0;
}
.scroll-horizontally-and-vertically {
width: 4000px;
height: 2000px;
background-color: lightblue;
}
h1 {
padding: 0;
margin: 0;
}
<div>
<div class="sticky">
<h1>please stick to top and left</h1>
</div>
<div class="scroll-horizontally-and-vertically"></div>
</div>
I have a div element wrapping other div elements like so:
<div style="overflow:hidden">
<div id="a"></div>
<div id="b"></div>
</div>
I have other css rules that manage the dimensions of the outer div. In my actual code, I want to position the div#a exactly 10 px below the outer div. However, I want div#b to still be cut off by the outer div's overflow:hidden.
What is the best way to achieve this?
Method 1
A good way to do it is by setting the overflowing element to position:fixed (which will make it ignore the parent overflow), and then positioning it relative to the parent using this technique:
.parent {
position: relative;
.fixed-wrapper {
position: absolute;
.fixed {
position: fixed;
}
}
}
One caveat is that you cannot have any of the top,right,left,bottom properties set on the fixed element (they must all be default 'auto'). If you need to adjust the position slightly, you can do so using positive/negative margins instead.
Method 2
Another trick I recently discovered is to keep the overflow:hidden element with position:static and position the overriding element relative to a higher parent (rather than the overflow:hidden parent). Like so:
http://jsfiddle.net/kv0bLpw8/
#wrapper {
width: 400px;
height: 50px;
position: relative;
z-index: 1000;
left: 0px;
top: 0px;
}
#wrapper #insideDiv {
width: 400px;
height: 50px;
overflow: hidden;
position: absolute;
z-index: 2000;
left: 0px;
top: 0px;
}
#wrapper #a {
position: absolute;
height: 30px;
width: 100px;
bottom: -40px;
z-index: 1000;
left: 0px;
}
<div id="wrapper">
<div id="a">AAA</div>
<div id="insideDiv">
<div id="b">BBB</div>
</div>
</div>
The easiest and most convenient way is to wrap your container div inside another div and set position: relative on the external div.
.outer-container {
position: relative;
height: 50px;
}
.container {
background: gray;
overflow: hidden;
height: 50px;
}
#a,
#b {
height: 100px;
width: 100%;
}
#a {
background: green;
position: absolute;
top: 60px;
}
#b {
background: red;
font-size: 60px;
}
<div class="outer-container">
<div class="container">
<div id="a"></div>
<div id="b">Cut off</div>
</div>
</div>
as people said, the element must be presented outside the parent in order to be not cropped. But you can do this with JavaScript to achieve the similar concept without having to change your actual markup:
function breakOverflow(elm) {
var top = elm.offset().top;
var left = elm.offset().left;
elm.appendTo($('body'));
elm.css({
position: 'absolute',
left: left+'px',
top: top+'px',
bottom: 'auto',
right: 'auto',
'z-index': 10000
});
}
then pass the element you want to exclude from the cropping of its parent:
breakOverflow($('#exlude-me'));
I'm trying to have an child element (something like a toolbar) of a parent element to be positiond on its bottom edge. The bahavior should be the same as using position fixed for the browser view.
I'm using absolute position right now. Everyting is perfect until the parent needs to scroll its content. Then the toolbar moves along with the rest of the parent's content.
Could somebody explain me why the toolbar moves?
Is it possible to achieve that task without need any javascript?
* {
box-sizing: border-box;
}
.container {
position: relative;
width: 100px;
height: 150px;
overflow-y: auto;
border: 1px solid black;
}
.mock {
height: 200px;
background-color: red;
}
.tool-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40px;
background-color: blue;
}
<div class="container">
<div class="mock"></div>
<div class="tool-bar"></div>
</div>
The toolbar is inside the scrollable area, that's why it scrolled. Try this code:
HTML
<div class="container">
<div class="scroll">
<div class="mock"></div>
</div>
<div class="tool-bar"></div>
</div>
CSS
div.scroll { /* style of .container to scroll */ }
I have found an interesting fiddle that may help you. They are using position:fixed and the divs are not nested:
http://jsfiddle.net/b2jz1yvr/
<div class="fixedContainer">
This is experimental
</div>
<div class="otherContainer"></div>
.fixedContainer {
background-color:#ddd;
position: fixed;
padding: 2em;
left: 50%;
top: 0%;
transform: translateX(-50%);
}
.otherContainer {
height:1000px;
background-color:#bbb
}
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.
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;
}