The currency area (#currencySelect) on the top left stops dropping down when it's floated left, as it is now. - http://trendy-menswear.myshopify.com/
Relevant HTML:
<div id="currencySelect" />
<header id="top" class="clearfix" />
Relevant CSS:
#currencySelect {
float: left;
}
#top {
position: relative;
z-index: 100;
}
When I remove the float the dropdown functions again.
Any pointers on how to position it where it is currently but have it function?
The quickest solution would be to add:
#currencySelect {
position:relative;
z-index:101
}
Currently the #top <header>, having a z-index: 100, is positioned over the #currencySelect <div> as the latter is removed from the normal layout flow due to floating.
When you apply the float:left; it enters under the header. So you can't click it.
Use position: absolute;z-index: 101; rather than float:left;.
the z-index of header#top is 100, covering this , give it an even higher z-index.
Related
The only way I know to get a layer on top is to use position: absolute.
(top good, bottom bad)
Once you do that you pretty much lose the option to scale dynamically with the rest of the page.
Sure you can do some width: calc(62% - 60px); hacking and get it almost there, or you can write a script that calculates the size etc..
But is there really no way to have a layer on top and still have it scaling with the page?
Its possible with position:relative; Relatively positioned elements takes the width of parent & can be bring on top by using z-index. z-index is applicable only on positioned elements.
Sample Code:
.menuParent{
height:34px;border:1px solid black;
}
.menu{
width:100%;position:relative;border:1px solid red;top:34px;z-index:1;background: white;
}
<div style="width:120px;" class="menuParent">
<div class="menu">
<div>AirBnb</div>
<div>Booking.com</div>
<div>Expedia
<div>Agents</div>
</div>ThaiHome</div>
</div>
<div> Other div below the menu list</div><br/><br/><br/><br/><br/>
<div style="width:240px;"class="menuParent">
<div class="menu">
<div>AirBnb</div>
<div>Booking.com</div>
<div>Expedia
<div>Agents</div>
</div>ThaiHome</div>
</div>
<div> Other div below the menu list width bigger width</div>
parent{
position: relative;
}
child {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
Greetings
I have serius problem, I need to move div in div in a div, but it doesn't work.
My question is if there couldn't be some problems with negative margins or child element of element with margin problem.
It seems negative margin is collapsing with positive margin in child element.
The margin of child element is moving parrent element.
here is fiddle
of my problem.
What I want to achieve is that:
a. Article div is overlaping main heading, I tried to avoid using absolute position, so I went for negative margin.
b. Text is margined inside of an article div. From top.
<div class="container">
<div class="main-heading"><h1>Main Heading</h1></div>
<div class="wraper">
<div class="article">
<div class="text"><p>Text</p></div>
</div>
</div>
</div>
Also here is some of problem in css:
div {
width: 100%;
}
.container {
}
.heading {
}
.wraper {
margin-top: -100px;
height: 500px;
}
.article {
margin-top: 0;
height: 200px;
}
.text {
margin-top: 120px;
height: 50px;
}
As I said, margin of text element seems to move article element from top as well. It's me or where is the problem, and what's the solution or workaraund? Preferably even without absolute position, but if you really need to use them, don't worry, but clear it somehow so it can be used as part of column and wont interact with upper/bottom content.
Thank you verry much for your time
edit: picture of what I want to achieve
That black rectangle is wrapper,
cat is article
text is text, but the margins move whole article now.
I found a related toppic on this, it happens in all mayor browsers, and there is a simple solution on that. There is a must to use overflow attribute in CSS...
I used
overflow: auto;
On parrent element, and it worked.
Based on your comment and what I think you're asking:
<div class="image">
<p>PRESTO</p>
</div>
.image {
display:block;
position:relative;
background-color:grey;
width:300px;
height:200px;
}
p {
display:none;
position:absolute;
top:0;
width:100%;
text-align:center;
color:orange;
font-size:2em;
}
.image:hover > p {
display:block;
}
FIDDLE:
https://jsfiddle.net/su5aqs3p/2/
Before giving negative vote or placing the question as duplicate, please read the issue first.
I'm having some issue with putting one div under another. I know that make people have asked this question here and I've read all of them and also tried everything out, but none of them worked for me.
Everyone days to give position: relative to to div and then give one higher z-index and another lower. None of them worked for me. So, I'm here for help.
In my project (http://loadtest.isaumya.com/) I have 2 divs i.e.
<body>
<div class="conteiner">blah blah blah</div>
<div id="particle-js"></div>
</body>
I want to put the <div id="particle-js"></div> behind of container, but nothing is working out. So please help.
You have ordered them badly:
<div class="container">...</div>
<div id="particles-js">...</div>
invert positions:
<div id="particles-js">...</div>
<div class="container">...</div>
makes sense since you want your full-screen canvas particles to be naturally z-index lower than the latter #container. Precedence rule.
also add this styles to your particle-js element:
#particles-js{
position:absolute;
top:0;
width:100%;
height:100%;
}
If the above still does not helps (it should) add:
.container {
position: relative;
z-index: 1;
}
Make your canvas element display:block;
Result image:
its just a very simple concept you need to remember about position in css
A relative positioned element is positioned relative to its normal
position
An absolute position element is positioned relative to the first
parent element that has a position other than static.
JSFiddle
this is how you may solve this problem:
<body>
<div class="container">blah blah blah</div>
<div id="particle-js"></div>
</body>
and the css
div {
width: 100px;
height: 100px;
}
.container {
position: absolute;
background-color: blue;
z-index: 1;
}
#particle-js {
position: absolute;
background-color: red;
}
make the z-index higher to wichever element you want a be displayed at the top
fiddle
In simple case of overlap of divs
<div id='first'>
first
</div>
<div id='second'>
second
</div>
css:-
#second {
margin-top: -18px;
background: #fff;
}
How do you ensure the second div shows over the first div, with #first not visible (in overlapping region)?
I do not want to make any div position:absolute.
You will want to use z-index. Make the second one a higher z-index
Like Chausser said, use z-index and also position:relative;
http://jsfiddle.net/xreVf/4/
#second {
position:relative;
z-index:2;
}
<div id="site_wrapper">
<div id="top"><?=$top?></div>
<div id="wrapper">
<div id="login_wrapper">
<?=$content?>
</div>
</div>
<div id="footer"><?=$footer?></div>
</div>
Where
$top should be drawn on the very top of the page.
$content should be centered both vertically and horizontally of the page.
$footer should be drawn on the very bottom of the page.
I do not want either of the divs to follow the view, I found two solutions for the problems one by one, but none to combine them, seeing as they both had the height element in css. So first I guess if it even is possible (which I guess it is) second is then of course, how?
Edit: Pretty much like this side, the top bar should always be on the top, that one is fairly straight forward.
Then the #login_wrapper should always be centered in the site with a fixed height.
Last the footer should always be on the bottom (it should be pushed not stickied), because in this case #login_wrapper wont fill out the site.
The #top and #footer both have fixed heights as well.
Edit2: Fixed some clarifications for the problem.
Found solution from this site [link]http://stackoverflow.com/questions/7909587/horizontal-and-vertical-centering-above-a-sticky-footer-in-css
Thanks anyway!
If i understand your question, try with this css
#site_wrapper
{
position: relative;
}
#top
{
position: relative;
top: 0px;
}
#footer
{
position: relative;
bottom: 0px;
}
#wrapper
{
position:relative;
vertical-align: middle;
height: 100%;
}
#login_wrapper
{
/* add some height */
}