I have a div fixed on the top and a div content below it.
When I scroll the page I want div content to be over the div top, I put z-index in div content but nothing happens...
#top{
top:0;
width:100%;
height:100px;
position:fixed;
border:1px solid #000;
background:black;
}
#content{
background:red;
margin-top:120px;
height:5000px;
z-index:300000;
}
html
<div id=top></div>
<div id=content></div>
I need div top to be fixed and content relative.
what is wrong?
https://jsfiddle.net/y97o6kaL/
Give z-index: -1; to #top will work for you.
#top{
top:0;
width:100%;
height:100px;
position:fixed;
border:1px solid #000;
background:black;
z-index: -1;
}
Working Fiddle
I would add position: relative; to the #content div.
This would remove the need for any z-index styles.
#top{
top:0;
width:100%;
height:100px;
position:fixed;
border:1px solid #000;
background:black;
}
#content{
background:red;
margin-top:120px;
height:5000px;
position: relative;
}
<div id=top></div>
<div id=content></div>
Related
I am trying to create a popup window triggered with JQuery and styled with CSS. I added a close button to the top right side of the box, however when you scroll down inside the box (overflow: scroll, due to max-height of the box) the X close button scrolls also, even though an absolute position is defined:
.team-name-popup{
position:fixed;
z-index: 9;
top:10%;
left:50%;
margin-left:-350px;
width:700px;
height:auto;
max-height:400px;
background:rgba(0,0,0,0.9);
overflow:scroll;
}
.team-name-popup-inner{
position:relative;
width:100%;
height:auto;
max-height: 100%;
padding: 50px;
overflow:scroll;
}
.team-popup-close{
position:absolute;
z-index:999;
top:5px;
right:10px;
color:#fff;
}
HTML
<div class="team-name-popup">
×
<div class="team-name-popup-inner">
<h5 class="team-name">Name</h5>
Text here
</div><!--team popup inner-->
</div><!--team popup-->
I tried changing the overflows, but then the scroll does not work:
.team-name-popup{
....
overflow:hidden;
}
.team-name-popup-inner{
....
overflow:scroll;
}
Default
Scroll
Please check this solution.
.team-name-popup{
position:fixed;
z-index: 9;
top:10%;
left:50%;
margin-left:-350px;
width:700px;
height: 400px;
max-height:400px;
background:rgba(0,0,0,0.9);
overflow:scroll;
}
.team-name-popup-inner{
position: absolute;
width:100%;
height: 400px;
padding: 50px;
overflow:scroll;
}
.team-popup-close{
position:absolute;
z-index:999;
top:5px;
right:10px;
color:#fff;
}
This is our code. css:
.mydiv
{
position: absolute;
background-color: white;
margin-top:40px;
display: block;
left: 50%;
transform: translate(-50%, 0);
max-width:10%;
max-height:30%;
overflow: auto;
}
body
<div class="mydiv">
<img border="0" src="http://atldunia.com/youtube/FixedP7.jpg" />
</div>
This div automatically adjusts to the size of the contents. Both the scroll bars appear on demand. However, we are unable to add a button that is right aligned and appears outside the scroll making it always visible.
http://atldunia.com/youtube/FixedPosPopup7.htm
I assume you wish to add a "close" button. If so, you can wrap your content in another layer and add the button to the first.
.popup-wrapper { display:block; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); max-width:400px; max-height:400px; overflow:hidden; }
.popup-close { display:block; position:absolute; right:0; top:0; width:32px; height:32px;
background:#404040; line-height:32px; vertical-align:middle; text-align:center; font-size:24px;
color:#909090; cursor:default; }
.popup-close:hover { background:#808080; color:#c0c0c0; }
.popup-content { display:block; position:relative; width:100%; height:100%; overflow:auto; }
.popup-content > img { display:block; position:relative; width:auto; height:auto; }
<div class="popup-wrapper">
<div class="popup-content"><img src="http://atldunia.com/youtube/FixedP7.jpg"/></div>
<span class="popup-close">×</span>
</div>
You will need modify a couple things to your liking, but you get the idea.
I illustrated in HERE a situation with a simple layout. I would like that all the elements keep their position when another element is modified. For example, if I change the Title font to more or less, the button2, will move and I don't want that. So is there a way to keep their position fixed even when other elements are modified?
<div id="slides">
<p class="title">TITLE GOES HERE</p>
<p class="description">Description goes here</p>
<div id="button1">BUTTON1</div>
<div id="button2">BUTTON2</div>
</div> <!-- end slides -->
#slides{
width:600px;
height:280px;
background:yellow;
}
p.title{
font-size:28px;
text-align:center;
position: relative;
top:40px;
}
p.description{
text-align: center;
position:relative;
top:20px;
}
#button1{
width:150px;
height:35px;
background:blue;
margin:0 auto;
line-height:35px;
text-align: center;
position:relative;
top:40px;
}
#button2{
width:85px;
height:25px;
background:red;
margin:0 auto;
line-height:25px;
text-align:center;
position:relative;
top:135px;
}
You're looking for elements relatively absolute positioned (or absolute relatively?).
You should set the parent #slides to position: relative and then the child elements should be position: absolute, with this you can set top, right, bottom or right properties in the children relatively to the #slide.
This way the children of #slides won't follow the flow when some other child changes.
http://codepen.io/anon/pen/yhFnb
Modify your css like this :
#slides{
width:600px;
height:280px;
background:yellow;
position: relative;
}
#button2{
width:85px;
height:25px;
background:red;
line-height:25px;
text-align:center;
position:absolute;
left: 50%;
margin-left : -42px;
bottom : -12px;
}
Demo http://codepen.io/anon/pen/gAcka
Hope it help.
when i position this div to the center and added a margin-top of 15px i got this white strip above the white div block. How do i get rid of it so that the white div is separated away from the top margin?
CSS:
body {
margin:0;
padding:0;
width:100%;
height:100%;
}
#middle {
background-color:#FFF;
display:block;
width:750px;
height:750px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
position:relative;
overflow:hidden;
}
#bigbg {
height:auto;
width:100%;
z-index:-100;
min-height:100%;
min-width:100%;
margin-left:0%;
position:fixed;
margin-top:0px;
}
HTML:
<img src="images/backgroundmain.jpg" id="bigbg">
<div id='middle'>
`
add top: 0; to your id #bigbg.
DEMO
I am trying to make the sidebar fill the height between the header and foot. As you can see it is going behind the footer. I would like it to stop at the top of the footer. Any help would be great!
Demo at: http://www.jsfiddle.net/pEbhK/
The HTML:
<div class="header">
<h2>Development Area</h2>
</div>
<div class="sidebar">
<h2>Current Projects</h2>
<ul>
<li>iCalendar</li>
<li>MyBand - Student Center</li>
</ul>
<h2>Future Projects</h2>
<ul>
<li>Mobile Application</li>
<li>RSS Feed</li>
</ul>
</div>
<div class="clear"></div>
<div class="footer">© 2013</div>
The CSS:
html, body, h1, h2 {
margin:0px;
padding:0px;
}
.clear {
clear:both;
}
.header {
display:inline-block;
width:100%;
background:#ABBFF2;
height:100px;
border-bottom: 5px solid #7F9DEB;
text-align:center;
}
.header h2 {
padding-top:38px;
}
.sidebar {
position: fixed;
height:100%;
width:250px;
background:#ABBFF2;
border-right:5px solid #7F9DEB;
float:left;
}
.sidebar h2 {
text-align:center;
}
.footer {
position:fixed;
display:inline-block;
bottom:0px;
width:100%;
height:30px;
border-top:5px solid #7f9deb;
text-align:center;
}
Try height:calc(100% - 140px) in .sidebar
.sidebar {
position: fixed;
height:calc(100% - 140px);
width:250px;
background:#ABBFF2;
border-right:5px solid #7F9DEB;
float:left;
}
updated jsFiddle File
A non-calc() way of doing this...
Your sidebar and footed have position: fixed, so they are positioned with respect to the view port.
You can size the sidebar using the following CSS:
.sidebar {
position: fixed;
top: 105px;
bottom: 35px;
left: 0px;
width:250px;
background:#ABBFF2;
border-right:5px solid #7F9DEB;
}
The value for the top offset is the header height + 5px for the border. Likewise, the bottom offset is the footer height + 5px for its border.
See demo at: http://jsfiddle.net/audetwebdesign/Lfpxq/
Note: You may want to add a min-height to the sidebar to prevent the content overflow issues. I think the same issue arises when using the calc() method.
Or write this to .footer in the css
background-color: #fff;