I have created a popup that appears and nearly fills the screen, and this popup is fixed so that it will remain centered on screen when the user scrolls the main page. But this popup is also scrollable and I have a header at the top of it that I want to always be visible.
How could I fix the header such that it will always be visible when the popup window is scrolled?
It seems if you set position:fixed this is always relative to the browser viewport, therefore it would be fixed to the top of the page not its parent container. Is this a task for sticky positioning in Webkit, or how can that be achieved?
JSFiddle demonstrating the issue - scroll the blue popup and the yellow header scrolls away when I want that to be fixed.
Change your CSS styling of #header to the following:
#header {
position:fixed;
width: inherit;
height:2em;
background-color:yellow;
}
Working fiddle here
If your parent is having a position relative or absolute or fixed, then the child will position itself with respect to the parent element.
Add position:fixed to #header and padding-top:2em to make the text visible.
#header {
position: fixed;
width:100%;
height:2em;
padding-top:2em;
background-color:yellow;
}
Here is the Fiddle : http://jsfiddle.net/nmuk3cv6/3/
Related
I have layout like this:
Entire right content's position is absolute
I want to be able scroll only this I should scroll boxes and this gray content to stay in his place.
Code and playground on => codepen
you need to modify your CSS file
.user-search-box .result-list{
position: absolute;
max-height:100%;
min-width:100%;
overflow:scroll;
}
Is there any neat CSS-only way to make an absolutely positioned div element stretch to the bottom of the document (not just the browser's window)?
Essentially, the div element is the background of a modal popup, overlaying the rest of the application. It should cover the entire page - from top to bottom. However, when the content is larger than the browser window, height still only sizes the element to the window height (and the content flows out of the div).
#background{
background-color: green;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
#content{
color: white;
height: 200%; /* simulate a lot of content - just put a large value in here */
}
Used like this:
<body>
<div id="background">
<p id="content">a</p>
</div>
</body>
For example, look at http://jsfiddle.net/TuNSy/ : The green background stretches to the visible portion of the parent element, but when you scroll down, you'll see that it doesn't actually stretch all the way to the bottom.
There are a couple of other questions, but they don't apply to my problem:
CSS Div stretch 100% page height : Just stretches the element to the window height and doesn't work when the content is larger than the window.
Absolute position background 100% of page height : illustrates the problem, but has no accepted answer, the original poster ends up using JavaScript.
The problem is that your absolutely positioned div is larger than your body which is why you are having the problem of the white background. If you simply add overflow:auto; to your #background, it should handle the overflow properly
Example
I have a fixed div on the top of the page but the content of the div is not scrolling with the html body on narrowing the window size. Can anybody help me out?
here is the jsfiddle link: http://jsfiddle.net/ALqd6/
css:
.header-container
{
width:100%;
position:fixed !important;
display:block;
overflow:hidden;
top:0;
background:#000;
height:70px;
color:red;
}
html:
<div class="header-container" style="min-width:1200px;margin:0 auto;">
<table cellpadding=19 class="hc-table" style="height:70px;">
<tr>
<td>m-1</td>
<td>m-2</td>
<td>m-3</td>
<td>m-4</td>
<td>m-5</td>
<td>m-6</td>
<td>m-7</td>
<td>m-8</td>
<td>m-9</td>
</tr>
</table>
</div>
</div></div>
According to the position attribute documentation, when you use position: fixed, you "position it at a specified position relative to the screen's viewport and doesn't move when scrolled".
This means that the object will stay in the current position regardless of how you scroll the page vertically or horizontally.
To achieve the result you mentioned, I believe you would need to use a JavaScript method that changes the div's left attribute to reflect the horizontal scroll performed by the user in the case when the window's width is not big enough to fit the whole content.
Some links that could be useful for you regarding this JavaScript approach are:
Horizontal page scrolling using Javascript
Position a Div "Fixed" Vertically and "Absolute" Horizontally within a "Position:Relative" Container Div
CSS how to fix an element to scroll horizontally with the page but not vertically?
How to animate a div move horizontally when page is scroll down?
Possibly this is what you want.
http://jsfiddle.net/vn5Uj/
.header-container{
width:100%;
!important;
display:block;
overflow:hidden;
top:0;
background:#000;
height:70px;
color:red;
}
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.
An element is positioned absolutely and is made to full width using the left and the right properties set to 0
The problem is, when the window is zoomed, the element is made full width only to viewport. The below images explain the problem in detail
Is there any CSS hack to fix this issue.
JSfiddle to test: http://jsfiddle.net/vaakash/kdgJp/
You can do the following:
body {
position:relative;
float:left;
}
#header {
width:100%;
}
http://jsfiddle.net/PNaSz/
This will make sure the absolute element orients against the body in width (because its positioned relative), float:left will make sure the body is as wide as the content.
Is there a reason you can't use width: 100%;?