Please look at the following example
http://jsfiddle.net/GANeX/90/
I want to show my green colored div outside the wrapper. I cannot change the positioning of the wrapper div as inner-wrapper also holds some other content which may come out when we change the position:relative to position:static.
How can I do this?
You can wrap the things you don't want to overflow in an element with a class called dont-overflow. Set the width of that class to the current .wrapper width, and then remove the overflow from the parent and add it to that class:
CSS dont-overflow class:
.dont-overflow
{
overflow-x: hidden;
overflow-y: scroll;
width: 200px;
height: 200px;
}
HTML:
<div class='wrapper'>
<div class='inner-wrapper'>
<div class='content-wrapper'></div>
<div class='dont-overflow'>
<div class='content-wrapper'></div>
<div class='content-wrapper'></div>
<div class='content-wrapper'></div>
</div>
</div>
</div>
http://jsfiddle.net/GANeX/97/
I think you need to use z-index.
.inner-wrapper{
position:absolute;
left:10px;
right:10px;
top:5px;
bottom:5px;
z-index: 999;
background:yellow;}
Related
Say I have three divs like following:
<div class="wrapper">
<div class="container">
container1
<div class="element">
fixed
</div>
</div>
<div class="container2">
container2
</div>
</div>
I want div: element to be fixed when it is inside div: container, but its position should become absolute when div: container2 becomes visible, it should not overlap with div - container2, but scroll away at that time with div: container.
A pure CSS solution is preferable, but if not possible I may go for a JS or jquery solution. I have created a fiddle for this, and tried some solution suggested here, which are not working.
What I would suggest is to use javascript to recognize when the scrolling is at a certain point with window.pageYOffset
When it reaches your desired window Y Offset you can start an event that modifies the css value of the positioning from fixed to absolute (by setting the parent container to relative) and bottom at 0.
Check out this jsfiddle https://jsfiddle.net/zq0kkkcx/2/
Also, this is the code that I'm talking about:
document.addEventListener("scroll", function(event) {
if(window.pageYOffset >= 1200){
console.log("1200");
// this is where you want your element to become absolute
// positioned to his parent container
// write your css changes here and apply them to elements
// add relative to container and absolute with bottom 0 to element
} if (window.pageYOffset <= 1200){
console.log("<1200");
}
});
If you want a CSS solution, here is a trick that you can do using z-index. Other than this there is a JS solution.
.wrapper {
width:100%
}
.container {
width:300px;
margin:0 auto;
height:1200px;
background:#ccc;
position: relative;
z-index: -1;
}
.container2{
width:300px;
margin:0 auto;
height:1200px;
background:#fcf;
z-index: 1;
}
.element {
background:#f2f2f2;
position:fixed;
width:50px;
height:70px;
margin-left:250px;
border:0px solid #d6d6d6;
}
<div class="wrapper">
<div class="container">
container1
<div class="element">
fixed
</div>
</div>
<div class="container2">
container2
</div>
</div>
You're looking for a sticky header. There is currently no way to make a header sticky at an arbitrary scroll position using pure CSS - you'll have to look into a JavaScript solution to accomplish that.
Yes, it is 100% possible to do this without any JavaScript
I updated your fiddle
Markup should be like this
<div class="wrapper">
<div class="outer-scroller">
<div class="scroll-container">
container1
<div class="fixed-header">
fixed
</div>
</div>
</div>
<div class="last-container">
container2
</div>
</div>
and css
.wrapper {
width: 100%;
height: 300px;
}
.outer-scroller {
height: 140px;
overflow-y: scroll;
}
.scroll-container {
padding-top: 70px;
width: 300px;
height: 1200px;
background: #CCC;
}
.last-container {
width: 300px;
height: 600px;
background: #FCF;
}
.fixed-header {
background: #F2F2F2;
position: absolute;
width: 300px;
height: 70px;
top: 0;
pointer-events: none;
}
You'll see I've added an outer-scroller div.
The next bit is changing your CSS slightly
The new outer-scroller div is double the height of your fixed-header (for the purposes of this example) and it has an overflow-y: scroll on it.
The container inside there is still the same.
The next change is turning your position: fixed into a position: absolute and then adding padding to the top part of the div you want to scroll in order to push its content "below" the new "fixed" header.
Scrolling over the outer-scroller div then makes its content scroll, and because its height is set with an absolute element on top it then scrolls "under" the fixed header.
Once the bottom of its child content scroll-container is reached, the whole page then continues scrolling, and you get the illusion of the header disappearing.
The last bit is pointer-events: none on the header so that it doesn't scroll away when the cursor is over it (but the div below does)
I have this a parent div which has a fixed position and also a child div which has a fixed position (can be changed) and has text inside. This child text is centered from the parent div.
I want to create a behavior by changing some CSS where when the parent div "height" is decreased, the child div with the text stays the same position and won't show if the parent div doesn't cover it.
The below snippet shows my current layout.
#parent {
position:fixed;
background:red;
width:100vw;
height:100vh;
}
#child {
color:black;
font-family:Arial;
position:fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
<div id="parent">
<div id="child">
<h1>
TEST
</h1>
</div>
</div>
What I wish to happen by changing some CSS is like this:
http://prntscr.com/bjin61
Say when the magic value is around 50%, it should only show the area which is highlight in a yellow border WITH THE TEXT CUTTING OUT (this is important).
You need to explicitely set the child position in absolute units, instead of % of parent. If you set position to fixed, child will become completely separate from parent, so it needs to be absolute. Finally, hide overflowing elements for parent.
#parent {
position:fixed;
background:red;
width:100vw;
height:47vh;
overflow: hidden;
}
#child {
background: yellow;
color:black;
font-family:Arial;
position:absolute;
top: 50vh;
left: 50vw;
transform: translate(-50%,-50%);
}
<div id="parent">
<div id="child">
<h1>
TEST
</h1>
</div>
</div>
When I use float, childs pop out of parents.
I just put overflow:hidden on the parent and the child pops back into its parent.
However, I can't do the same with an absolute div and a relative div.
.parent {
position: relative;
overflow: hidden;
}
.child {
position: absolute;
}
<div class="parent">
<div class="child">First</div>
<div class="child">Second</div>
</div>
The goal is to float 2 images one over another to create a slideshow, but still make the page respect the slideshow as an item.
Expected: "First" hovers above "Second" inside parent
Behavior: "First" and "second" are hidden, parent is 0px in height.
Upon removing overflow:hidden;, they appear outside the parent.
Since you have only absolute div inside a relevant parent div there is effectively no content in the parent div. You can set a preferred height to the parent div but also need to set html and body height to 100%.
Note: You would likely set your parent div to the size of your images to be displayed
I have colored the parent black and the children red for visual point of view.
Is this what you are trying to achieve? Sorry if I have miss understood your question.
html, body {
height:100%;
width:100%;
}
.parent {
position: relative;
height:50%;
width:50%;
background-color:Black;
}
.child {
position: absolute;
background-color:red;
width:20%;
height:20%;
}
<div class="parent">
<div class="child">First</div>
<div class="child">Second</div>
</div>
I want to create a div that's wider than its parent, and i found many solutions.
Almost all of them say something that looks like this:
position:absolute;
left:0;
right:0;
(for example: How to expand child <div> with 100% of body width?)
This is indeed a solution, but there is only one little problem.
situation:
(jsfiddle)
<style>
.parent
{
width:70%;
padding: 1%;
}
.fullwidth
{
position:absolute;
left:0;
right:0;
}
</style>
<div class="parent">
<div>
<h1>
This is a normal div.
This text is visible
</h1>
</div>
<div class="fullwidth">
<h1>
This is a full width div.
</h1>
</div>
<div class="normal-div">
<h1>
This is a normal div
This text is hiding behind fullwidth div
</h1>
</div>
</div>
In this example, the second normal div is hiding behind the fullwidth div, because the fullwidth is absolute positioned.
So, how can you do this without having the divs hide behind the fullwidth div?
You need to make two changes to the "normal div":
Position relative (the default is static)
Set z-index below that of the absolute positioned div
And one change to the absolute div (set its z-index below the "normal" div).
http://jsfiddle.net/gx4p2red/3/
.fullwidth
{
position:absolute;
left:0;
right:0;
/*Testing only*/
background-color: green;
z-index: 0;
}
/*Testing only*/
.normal-div
{
background-color:red;
position: relative;
z-index: 1;
}
I want to have a div with fixed position inside a div with overflow-y:scroll, meaning I want the div to stay in place while the rest of the content scrolls normally.
And I can't figure out what is wrong, could anyone help? thanks in advance...
.foo {
position:relative;
display:block;
width:100%;
height:300px;
overflow-y:scroll;
}
.bar {
position:fixed;
top:0;
right:0;
}
And here is the HTML
<div class="foo">
<div class="bar"><div><!-- end of div that should be fixed -->
<div class="someOther">...</div>
<div class="someOther">...</div>
<div class="someOther">...</div>
<div class="someOther">...</div>
</div><!-- end of container -->
When you apply position:fixed to an element, you are positioning it in relation to the window itself, not its parent element. You'll want to use position:absolute to position a child in relation to its parent, as long as the parent has a position other than position:static, the default position.
As you correctly did in your example, apply position:relative to the parent .foo and then apply position:absolute to the child .bar. Normally, this would achieve the desired result of snapping the .bar to the top of the parent, but since there is an overflow of child content in the parent div, and overflow-y:scroll scrolls all the child content, .bar has to scroll as well. See the top example in my Fiddle here.
To fix that, wrap the content you want to scroll in another container with overflow-y:scroll on and remove overflow-y:scroll on .foo to prevent .bar from scrolling.
To see the working example that you can adapt, see the bottom example in my Fiddle here.
A fixed elements position is relative to the entire document you are viewing, not whatever the parent element is. If you want that to work, you'd need something like this:
CSS
.foo {
height : 300px;
position : relative;
width : 100%;
}
.bar {
border-bottom : 1px solid #000;
height : 50px;
}
.scollable_content {
height : 250px;
overflow-y : auto;
}
HTML
<div class="foo">
<div class="bar"></div>
<div class="scrollable_content">
<div class="someOther">...</div>
<div class="someOther">...</div>
<div class="someOther">...</div>
<div class="someOther">...</div>
</div>
</div>
Here, I created a fiddle for you.