I have the following HTML and CSS where the position of the #header id has to be mandatory set to absolute:
<div class="main">
<a href="www.website.com">
<div id="header" class="other">
</div>
#header{
padding-left: 250px;
position:absolute;
}
This code sets the header div over the link tag and it becomes (the link) unavailable for selecting.
My question is what CSS do I have to apply to .main > a so that it does not get below the header div?
I tried the below but it does not work so any other ideas are welcomed:
.main > a {
z-index:99999;
}
z-index will work only on positioned elements
z-index wont be applied if no positioning has been specified for the element. So, I would suggest you to change your CSS slightly as below.
ie, the new CSS for .main > a would be like
.main > a {
position:relative;
z-index:99999;
}
UPDATE
z-index will not work with statically positioned elements..see the answer here
The z-index attribute won't have effect if you don't set position to relative, absolute or fixed.
.main > a {
position: relative;
z-index:99999;
}
Related
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/
When I use float, childs pop out of parents.
I just put overflow:hidden on the parent and the child pops back into its parent.
However, I can't do the same with an absolute div and a relative div.
.parent {
position: relative;
overflow: hidden;
}
.child {
position: absolute;
}
<div class="parent">
<div class="child">First</div>
<div class="child">Second</div>
</div>
The goal is to float 2 images one over another to create a slideshow, but still make the page respect the slideshow as an item.
Expected: "First" hovers above "Second" inside parent
Behavior: "First" and "second" are hidden, parent is 0px in height.
Upon removing overflow:hidden;, they appear outside the parent.
Since you have only absolute div inside a relevant parent div there is effectively no content in the parent div. You can set a preferred height to the parent div but also need to set html and body height to 100%.
Note: You would likely set your parent div to the size of your images to be displayed
I have colored the parent black and the children red for visual point of view.
Is this what you are trying to achieve? Sorry if I have miss understood your question.
html, body {
height:100%;
width:100%;
}
.parent {
position: relative;
height:50%;
width:50%;
background-color:Black;
}
.child {
position: absolute;
background-color:red;
width:20%;
height:20%;
}
<div class="parent">
<div class="child">First</div>
<div class="child">Second</div>
</div>
So I've got a fixed position element. It has a child that is position:static. A child of the position:static element is position:fixed, and doesn't scroll with it's parent, behaving like a fixed position element. Is there any way to get the grandchild element to scroll? I'd REALLY like to avoid specifying position:relative. Any thoughts on a solution. I'd also like to understand that behavior a little better.
<div class="fixed-parent">
<div>
<div class="absolute-child">
Test
</div>
<div class="some-stuff-to-make-it-tall">
really tall
</div>
</div>
.fixed-parent{
width:500px;
height:500px;
border:1px solid #ccc;
}
.fixed-parent > div{
height:500px;
overflow-y:scroll;
}
.some-stuff-to-make-it-tall{
margin-top:25px;
height:600px;
}
.absolute-child{
position:absolute;
}
https://jsfiddle.net/L5hscgu5/1/
Right now .absolute-child is not positioned relative to the scrolling div. Adding position: relative; to .fixed-parent > div accomplishes what I think you're trying to do.
https://jsfiddle.net/L5hscgu5/4/
.fixed-parent > div{
height:500px;
overflow-y:scroll;
position: relative;
}
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;
}
I want to have a div with fixed position inside a div with overflow-y:scroll, meaning I want the div to stay in place while the rest of the content scrolls normally.
And I can't figure out what is wrong, could anyone help? thanks in advance...
.foo {
position:relative;
display:block;
width:100%;
height:300px;
overflow-y:scroll;
}
.bar {
position:fixed;
top:0;
right:0;
}
And here is the HTML
<div class="foo">
<div class="bar"><div><!-- end of div that should be fixed -->
<div class="someOther">...</div>
<div class="someOther">...</div>
<div class="someOther">...</div>
<div class="someOther">...</div>
</div><!-- end of container -->
When you apply position:fixed to an element, you are positioning it in relation to the window itself, not its parent element. You'll want to use position:absolute to position a child in relation to its parent, as long as the parent has a position other than position:static, the default position.
As you correctly did in your example, apply position:relative to the parent .foo and then apply position:absolute to the child .bar. Normally, this would achieve the desired result of snapping the .bar to the top of the parent, but since there is an overflow of child content in the parent div, and overflow-y:scroll scrolls all the child content, .bar has to scroll as well. See the top example in my Fiddle here.
To fix that, wrap the content you want to scroll in another container with overflow-y:scroll on and remove overflow-y:scroll on .foo to prevent .bar from scrolling.
To see the working example that you can adapt, see the bottom example in my Fiddle here.
A fixed elements position is relative to the entire document you are viewing, not whatever the parent element is. If you want that to work, you'd need something like this:
CSS
.foo {
height : 300px;
position : relative;
width : 100%;
}
.bar {
border-bottom : 1px solid #000;
height : 50px;
}
.scollable_content {
height : 250px;
overflow-y : auto;
}
HTML
<div class="foo">
<div class="bar"></div>
<div class="scrollable_content">
<div class="someOther">...</div>
<div class="someOther">...</div>
<div class="someOther">...</div>
<div class="someOther">...</div>
</div>
</div>
Here, I created a fiddle for you.