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;
}
Related
So I have a div with display:flex and position:relative.
I'd like to have an overlay element on the bottom of this div so I put position:absolute on it. If its height would be auto that would be the best but not must have. The problem is if I scroll the parent relative div then the absolute positioned goes with it. How could I pin it to the bottom?
Code
I'd like a pure css solution.
Update1:
A working solution: http://codepen.io/apreg/pen/gwBdJq
If I got what you want, you always want to have arrows on the screen. But that's fixed position then, like this:
http://codepen.io/anon/pen/mAzjWE
.actionRow {
position: fixed;
bottom:120px;
}
The Problem:
Footer div not placed below content div.
(update) the container had extra 100px, because of -100px(content). (need to remove 100 px from container)
Structure:
Container/wrapper contains: menuBar div, content div, and footer div.
all member position:relative;
Details:
Menu div is overlay
Content div is using top:-(height of menu)
Footer div use top:0;
JSFiddle
Solution: after a while, I saw that the menubar should be absolute instead of relative. The problem exist because of the -100px(height of menu), so the solution is not using negative value and use absolute instead.
your content is not long enough to force footer to bottom. You can do the following:
-declare a height for your footer: 30px
.footer{
background-color:red;
position:relative;
top:0;
height:30px;
}
-set the container margin-bottom to negative the footer height (-30px)
.container{
background-color:darkblue;
min-height:100%;
min-width:100%; /* make width 100% in screen*/
display:inline-block; /* make width follow its content if streched more*/
margin: 0 auto -30px;
}
You also have an extra unclosed in the footer
Footer needs to be moved so that it is a sibling of container instead of a child
Fiddle
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/
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.