I have a menu div and below is content div. When I add box-shadow to content div, it will paint over menu div and it doesn't look good. I would like to see box-shadow being painted behind menu div.
Is there way how to achieve it?
Using z-index you can position the "layering" of your elements:
.menu
{
z-index:1;
position: relative;
}
.content
{
z-index:0;
position: relative;
}
Related
I have a layout wrapped with scrollbar component of react like this on this link: https://malte-wessel.com/react-custom-scrollbars/ this kind of scrollbar, and I need a tool tip to appear over the layout on the bottom when it is scrolling. Z-index does not seem to work.
I tried using z-index but no luck.
https://malte-wessel.com/react-custom-scrollbars/
What I need is this:
You can just add the position of the tooltip related to the hover
Change the css of the hover like this
.info__helper--withhover:hover {
.text-inside {
display: block;
position: relative;
top: 10px;
left: 3px;
}
}
I am using animate.css to add some animations to a wesite.
Some animations like "fadeInLeft/Right" or "bounceInLeft/Right" make the horizonatl scroll to appear. This has easy fix, adding overflow-x:hidden to the parents.
But now I have an absolute positioned button, placed to be in the middle of two parents divs. THe parent div has overflow-x:hidden but it doesn't seems to affect the button because the position:absolute.
How can I avoid the horizontal bar to appear when the button is animated?
This is the website http://themescreators.com/demos/cuora/ the buttons are the circular white floating buttons below the intro slider and above the footer.
Try Overflow to hidden :
body {
overflow-x: hidden;
}
.hidden-thing {
position: absolute;
left: 100%;
width: 50px;
height: 50px;
opacity: 0;
}
Check this resource :
https://css-tricks.com/findingfixing-unintended-body-overflow/
I'm working on a project using a responsive layout. I have a div that goes beneath and around the header div. I did this with negative absolute positioning. The problem is the elements following that are getting positioned on top of it. The absolute positioning took that div out of the normal flow of the page and now stuff is stocking up on top of it.
Normally, I would just absolutely position the rest of of the elements in the content div, but the absolutely positioned div contains an image slider which is responsive so the height of the div varies depending on width of the screen.
<div id="container">
<div id="header"></div>
<div id="content">
<div id="absolutely_positioned"></div>
<div id="problem_div">
</div>
</div>
#container {
max-width: 1600px;
}
#header {
width: 52.5%
height: 146px;
}
#content {
position: relative;
}
#absolute_position{
position: absolute;
top:-100px;
}
The elements following the absolutely positioned div are getting stack on top of it? I'm not getting the problem: jsfiddle. Note that I had to fix some typos; double check your classes/IDs in the markup and stylesheet are matching.
CSS (with fixed typos):
#container {
max-width: 1600px;
border:2px dotted black;
}
#header {
width: 52.5%;
height: 146px;
border:1px solid red;
}
#content {
position: relative;
}
#absolutely_positioned{
position: absolute;
top:-100px;
background:blue;
}
Of course, this is assuming my comment above didn't isolate the problem being that your problem_div does not have a closing tag in the code you posted.
EDIT
In response to your comment above, I know your problem now. You will notice the blue box is aligning right underneath the red box. This is normal behavior because those are both relative divs. When you make a div absolute, not only does it ignore surrounding divs (but not containing divs) but the surrounding divs also ignore it. That is, the green box will not push the blue box down, only the red box will. To illustrate the answer further, if you click my jsfiddle you will see the problem_div text right underneath the header div, which is where it should be. The absolute div does not affect this behavior.
Just take off the
position:absolute;
and instead of using
top:-100px;
use
margin-top:-100px;
I fixed it on your jsfiddle.
I'd like to achieve a similar effect as the one in this image:
Basically, I want to have a div as a menu bar that's always on top - the div beneath it being the container div for my content. Clicking any links in my menu bar only change the content in the container div.
You need to use the position: fixed; property for #top div.
<div id="top"></div>
#top {
position:fixed;
top:0px;
width:100%;
height:70px;
}
You need to have a div and assign the CSS classes:
.className {
width: 100%;
position: fixed;
top: 0px;
height: 75px;
}
Then on your div have: <div class="className">Whatever</div>
I have the following divs in my HTML:
<div class="main">
<div class="bgimage"></div>
<div class="content">Text</div>
which is directly inside my body.
With the following CSS:
body {
margin: 0;
padding: 20px 0;
}
.content {
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
.content {
position: relative;
z-index: 1;
border: #000 thin solid;
width: 960px;
margin-left: auto;
margin-right: auto;
background-color: #000;
}
.bgimage {
position: absolute;
z-index: -1;
width: 1024px;
height: 768px;
margin-left: auto;
margin-right: auto;
background-image: url(bg1.jpg);
}
Basically, I have a Div that with a display of a background image, and I will have another Div on top of this with transparency. This current code works, but my problem is when I am trying to take the content div down from the top.
When I add margin-top:100px, for example, is also brings the image down. I thought it would not touch it if it is not on the same z-index? Why does adding a margin also force the bgimage div down?
I have also tried making the div with class of content a position of absolute and a zindex, but then this won't centre. How should I solve this?
your CSS should be
.bgimage { position: relative; }
.content { position: absolute; }
so the .content will be positioned relative to the .bgimage
your current CSS makes the .bgimage position relative to the document.
see this link on CSS positioning
z-index has no relation to positioning: it only affects the rendering order of your elements. Position: relative tells the browser to render the element at the place it should be, and offset it by eventual left, right, top or bottom coordinates. Therefore, margins, paddings, etc. still affect it.
Only position: absolute guarantees position independance.
I see no need for "z-index"es or "position: absolute" in your code at all -- unless you have other complications that you have not revealed to us.
To center the background on the DIV class="main":
body{margin:0;padding:20px 0;}
.main{background:transparent url(bg1.jpg) no-repeat center top;}
.content{border:#000 thin solid;width:960px;margin-left:auto;margin-right:auto;background-color:#000;opacity: 0.5;filter:alpha(opacity=50);-moz-opacity: 0.5;}
The "center top" places the center-top of the background image on the center-top of the element it's applied to. You may want to apply a
min-width:1024px;_width:1024px;
to the same element -- to prevent a narrower window from hiding the edges (this will change how the element is rendered if the "viewport" is narrower than the background's dimensions).
The only thing your pre-modified code it can do that my modified code can't:
Crop the background image (if it is not natively 1024px x 768px) by using the css "width" and "height" properties
If the class="main" element already has a background image set, most browsers don't support the CSS3 required to stack multiple backgrounds on the same element
Some of what was stated about "z-indexing" and the "position" property above was correct but failed to mention:
you've taken your class="content" element out of "the flow". The ancestor elements won't grow when the content of class="content" element grows. This is an important and fundamental difference between "z-index"ed elements and elements that remain "in the flow".
Other side notes:
elements with the same z-index are stacked according to their order in the HTML (later in the HTML means they are drawn above on the screen)
"z-index"ing requires "position: (absolute|relative)", "z-index: (valid value)", and IIRC "(top|left|bottom|right): (valid value)" to take the element "out of the flow"
CSS absolute positioning is always done "relative" to the most recent ancestor that has a "position: relative", otherwise it uses the body tag by default. If the CSS you included is all that affects those divs, then your .content div will be positioned relative to the .main div, but your .bgImage will be positioned based on the tag.
If you want both .content and .bgImage to move in lockstep, then you'll need to add a "position: relative" to div.main.