.product {
position:relative;
width:300px;
height:200px;
overflow:visible;
}
.menu {
position:absolute;
width:200px;
height:400px;
}
<div class="product">
<div class="menu></div>
</div>
The menu is hidden by its parent product. The product overflow is visible.
How to make the menu fully visible? The product position is relative, which can
not be changed.
The menu is hidden, and it will become visible on mouseover.
EDIT ---------
The above code is working. The menu is not fully visible because it is clipped by next product. So set z-index to 1000. However,
.product {
position:relative;
width:300px;
height:200px;
overflow-x:hidden;
overflow-y:visible;
}
is not working. There is a vertical scroll, same as overflow-y:auto. why?
You could add padding or margins to them if it's just underneath it. However it's kind of hard to actually see what it's doing so maybe make a fiddle.
.product {
position:relative;
width:300px;
height:200px;
padding: 10px;
overflow:visible;
}
.menu {
position:absolute;
width:200px;
height:400px;
padding: 10px;
}
Related
I've seen several similar questions/answers to this problem on SO but none of the answers that I've checked have helped me.
I'm attempting to have a "Side-Bar" extend from 10px less than the top of the page, all the way to the bottom.
However (when using height:100%), the "Side-Bar" only reaches to the bottom of the loaded browser window, if there is content past the browser window that you scroll down to, the "Side-Bar" ends prematurely.
Basically, its height is only 100% of the browser window, I desire it to be 100% of the full page content.
I've created a JSFiddle that shows my problem:
http://jsfiddle.net/qaEzz/1/
My CSS:
#sidebar {
position:absolute;
right:8px;
width:200px;
height:100%;
overflow:hidden;
background-color: yellow;
}
i put the <div id="sidebar"></div>
into the <div id="content">
and added in the css
#topbar {
width:100%; <--this
height:20px;
background-color: red;
}
and this
#sidebar {
position:absolute;
right:16px; <--! extended to 16 px
width:200px;
height:100%;
overflow:hidden;
margin-top:-10px; <--!
background-color: yellow;
}
#content {
position: absolute;<--! and remove the marging: 10px just add a <br> in the html
width:100%
}
Here is the working Fiddle
If you change position:absolute; to position:fixed;, then it would stick to its position on the right.
For a sidebar that might have a longer length than the browser length itself, instead of the position attribute, use the float attribute.
http://jsfiddle.net/wK2Yh/
#sidebar {
float:right;
right:8px;
width:200px;
height:100%;
overflow:hidden;
background-color: yellow;
}
I have two block elements, a header, and a nav. The header has a div inside of it that overflows above the nav. I used z-index to define those items that way, but now I have a items inside of the nav that I'd like to be the most prodominent/highest element on the page, so to appear above the header and it's overflowing elements. Is this possible?
Please see example - http://jsfiddle.net/zAehr/ - I'd like the Nav a items to be above the blue logo class.
My CSS:
#header {
position:relative;
display:block;
height:100px;
width:100%;
overflow:visible;
background:#eee;
z-index:10;
}
.logo {
position:relative;
display:block;
height:250px;
width:250px;
background:#336699;
z-index:10;
}
#navbar {
position:relative;
width:100%;
height:100px;
background:#bbb;
z-index:9;
}
#navbar a {
display:block;
position:relative;
padding:10px;
z-index:100;
float:left;
}
Many thanks SO
take the z-index: 9 off of #navbar
http://jsfiddle.net/pxfunc/zAehr/1/
This is feeling simple question but i'm struggling to get the exact output. I need to align 3 div's inside a div in footer. I have tried lot in google, and worked before too. but in footer fixed position its not working exactly.
In that image, white color container div for footer, red- left, green -right, and center.
here is my CSS :
div .footer-container
{
height:53px;
width:100%;
position:fixed;
}
div .footer-container div .footer-left
{
background-color:#f00;
float:left;
width:33%;
height:31px;
}
div .footer-container div .footer-right
{
background-color:#0f0;
float:right;
width:33%;
height:31px;
}
div .footer-container div .footer-center
{
background-color:#f0f;
margin:0 auto;
height:31px;
width:33%;
}
here is HTML :
<div data-role = "footer" class="footer-container">
<div>
<div class="footer-left"></div>
<div class="footer-right"></div>
<div class="footer-center"></div>
</div>
</div>
What am doing wrong ? pls explain.
Get rid of all the floats. Add Display: inline-block to each of the three inner div's and adjust their width (to 32%) so they fit side by side.
div .footer-container {
height:53px;
width:100%;
position:fixed;
background:#ccc
}
div .footer-container div .footer-left {
background-color:#f00;
display: inline-block;
width:32%;
height:31px;
}
div .footer-container div .footer-right {
background-color:#0f0;
display: inline-block;
width:32%;
height:31px;
}
div .footer-container div .footer-center {
background-color:#f0f;
display: inline-block;
margin:0 auto;
height:31px;
width:32%;
}
Here is a FIDDLE
Make the middle div also float left. If that doesn't help, give the three child divs the property position:relative or position:static.
If that doesn't help, I suspect the problem lies in your html code.
This is because you center div don't have float,
Add this code to div .footer-container div .footer-center
float: left or float:right
use float:left
here's my code
<div style="width:100%; background-color:#FF6600">
<div style="width:33%; background-color:#FF1100; float:left">div1</div>
<div style="width:33%; background-color:#FF6655; float:left">div2</div>
<div style="width:33%; background-color:#FF3333; float:left">div3</div>
</div>
This should work, u lose 1% of width, but it works great for me.. the colors are just to see the 3 differnt divs.. u can put it into css..right?
Take the floats off the left and right and absolutely position them inside the container. This is assuming you want to accomplish what the image is showing. If you just want all 3 side by side your CSS works fine, just remove everything from the names but the class names (like I have it below)
http://jsfiddle.net/calder12/rnjtb/2
.footer-container
{
height:53px;
width:100%;
position:fixed;
}
.footer-left
{
background-color:#f00;
width:33%;
height:31px;
position:absolute;
bottom:0;
left:0;
}
.footer-right
{
background-color:#0f0;
width:33%;
height:31px;
position:absolute;
bottom:0;
right:0;
}
.footer-center
{
background-color:#f0f;
margin:0 auto;
height:31px;
width:33%;
}
I'm working on the following layout structure:
<div id="wrapper">
<div id="header"></div>
<div id="pageContainer"></div>
<div id="footer"></div>
</div>
With the following CSS I set the footer to the bottom of the page:
#wrapper {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#pageContainer {
padding:10px;
padding-bottom:60px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#6cf;
}
If the content in the 'pageContainer div' is small, I don't want to show the scroll bars in the div but attach the footer to the bottom of the 'pageContainer div' (right not the footer is always at the bottom of the viewport)
If the content of the 'pageContainer div' is long I need the footer to remain visible in the viewport (at the bottom) and show the scroll bars in the 'pageContainer div'.
How do I do this? Any ideas? thanks!
PS: I need a solution that doesn't use JS.
If I read you correctly, you're describing behavior where positioning switches from relative to fixed, depending on the size of an element relative to the real-estate available in the viewport.
Quite certainly, you cannot achieve this without JavaScript.
But a solution where the footer is always at the bottom of the viewport is fairly common and easy to do without JavaScript. In case you do not already know how to do that:
#header, #pageContainer, #footer{
position:fixed;
left:0px;
right:0px;
}
#header{
top:0px;
height:100px;
background:#ff0;
}
#pageContainer {
top:100px;
bottom:60px;
overflow:auto;
}
#footer {
bottom:0px;
width:100%;
height:60px;
background:#6cf;
}
I guess you could do something like this:
#header {
background:#ff0;
padding:10px;
height: 15%;
}
#pageContainer {
padding:10px;
max-height: 70%;
overflow: auto;
}
#footer {
bottom:0;
width:100%;
height:15%;
background:#6cf;
}
Note that you need to specify your heights in percentages. Also padding might be an issue.
JSFiddle: http://jsfiddle.net/eFNAF/17/
Notice the green background and the image overlaying it. The previous/next "buttons" are positioned over the photo. This causes there to be blank space above the photo where the buttons were originally positioned. I want to float the buttons over the photo as shown but without "using" the space above the photo. E.g. I want the buttons to be positioned absolutely but still relative to their container. Also notice that the div.Image is centered using an auto left/right margin. This makes it so that position: absolute cannot be used.
Edit: The image should be top-aligned with the green box. The buttons should be offset 10px below the top of the image and 10px from the left/right of the image. Different size images will be displayed so the image size cannot be set in CSS.
CSS
.Image,
.Image img
{
width:366px;
height:341px;
border:0;
}
.Image
{
position:relative;
}
.Image a
{
position:absolute;
top:10px;
width:28px;
height:28px;
background-color:red;
border:1px solid black;
text-align:center;
z-index:2;
text-decoration:none;
display:block;
}
.Image a.Previous
{
left:10px;
}
.Image a.Next
{
right:10px;
}
HTML
<div class="Image">
<
>
<img src="http://images5.fanpop.com/image/photos/31500000/Happy-Hyena-hyenas-31563531-385-358.jpg">
</div>
DEMO
Updated:
Change this:
.Image,
.Image img
{
width:366px;
height:341px;
border:0;
}
.Image
{
position:relative;
}
to:
img
{
border:0;
vertical-align:bottom;
}
.Image
{
position:relative;
display:inline-block;
}
DEMO 2