Please refer to the code below:
<ul>
<li style="height:100px; overflow:hidden;">
<div style="height:500px; background-color:black;">
</div>
</li>
</ul>
From the code above, we know that we can only see 100px height of black background.
Hhow can we see 500px height of <div> black background? In other words, how can I make the <div> appear in front of <li>?
Use the CSS z-index property. Elements with a greater z-index value are positioned in front of elements with smaller z-index values.
Note that for this to work, you also need to set a position style (position:absolute, position:relative, or position:fixed) on both/all of the elements you want to order.
You can set the z-index in css
<div style="z-index: -1"></div>
In order an element to appear in front of another you have to give higher z-index to the front element, and lower z-index to the back element, also you should indicate position: absolute/fixed...
Example:
<div style="z-index:100; position: fixed;">Hello</div>
<div style="z-index: -1;">World</div>
Upper div use higher z-index and lower div use lower z-index then use absolute/fixed/relative position
The black div will display the full 500px unless overflow:hidden is set on the 100px li
I think you're missing something.
http://jsfiddle.net/ZNtKj/
<ul>
<li style="height:100px;overflow:hidden;">
<div style="height:500px; background-color:black;">
</div>
</li>
</ul>
<ul>
<li style="height:100px;">
<div style="height:500px; background-color:red;">
</div>
</li>
</ul>
In FF4, this displays a 100px black bar, followed by a 500px red block.
A little bit different example:
http://jsfiddle.net/ZNtKj/1/
<ul>
<li style="height:100px;overflow:hidden;">
<div style="height:500px; background-color:black;">
</div>
</li>
</ul>
<ul>
<li style="height:100px;">
<div style="height:500px; background-color:red;">
</div>
</li>
<li style="height:100px;overflow:hidden;">
<div style="height:500px; background-color:blue;">
</div>
</li>
<li style="height:100px;overflow:hidden;">
<div style="height:500px; background-color:green;">
</div>
</li>
</ul>
Related
This is probably really dumb but my body is covering all my elements rendering everything unclickable...I fixed this before but I forgot how.
https://codepen.io/Tehan123/pen/VgdRBQ
`<body>
<section class="Body-Wrapper">
<div class="Page-Wrapper-First">
<img class="logo" src="https://image.flaticon.com/icons/png/512/776/776541.png"</img>
<nav>
<ul class="nav-menu">
<li>Features </li>
<li>How It Works </li>
<li>Pricing </li>
</ul>
<div class="dropdown">
<button class="menu" src="https://image.flaticon.com/icons/svg/149/149176.svg"> </button>
<div class="dropdown-content">
Features
How It Works
Pricing
</nav>
<section class="hero">
<div class="hero-text">
<h1> Creates 'a place beyond time' for its guests.</h1>
</div>
<img class="hero-image" src="https://images.pexels.com/photos/1320686/pexels-photo-1320686.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"</img>
</section>
</div>
</section>
</body
>
`
You have a negative z-index on your body. Whenever elements have a negative z-index they're not clickable and everything as a child of body will be the same. You need to set a value greater than 0.
This is the last 3 lines of your CSS
body {
z-index: -3;
}
UPDATE
Also it seems like you have a z-index: -2 on .Body-Wrapper. You should use a value greater than 0.
When you remove/change these two values it might look like your page is broken, it's because you have a bunch of negative z-index value in other places. You need to change those to positive as well.
Looking at this simple code why the textarea is pushed 10/15 pixel down?
<ul>
<li>
<div>
<textarea></textarea>
</div>
</li>
</ul>
How can I fix this via css? I wish to have the textarea inline with the list.
div is a block element
So either you use display:inline-block ( or inline, depending on what you want ) on the div
div {
display:inline-block
}
<ul>
<li>
<div>
<textarea></textarea>
</div>
</li>
</ul>
Either you use float:left . But i suggest you don't do that. Using float left will get the element out of the normal flow
Elements after a floating element will flow around it. To avoid this, use the clear property or the clearfix hack.
Using float:lett
Try this, it works fine :
<ul>
<li>
<div style = 'float:left' >
<textarea></textarea>
</div>
</li>
</ul>
HTML:
<ul>
<li>
<div class="text-div">
<textarea></textarea>
</div>
</li>
</ul>
CSS:
.text-div{
float: left;
}
Hope that helps.
it's because you have used list-style. remove it through css
ul{
list-style:none;
}
I'm trying to stop moving objects when hovering.
See what i'm doing here>JSFIDDLE
When hovering the second link (TEST2), it changes to bold property (need to be), but it pushes the other button (TEST) to the left. How can i anchor other elements in the header and stop their movement?
give an item class to normal list elements and seperator class to seperator list element
<div class="header-bg">
<div class="container">
<div class="menu-header">
<nav>
<ul>
<li class="item">Test</li>
<li class="seperator"><span>∴</span></li>
<li class="item">Test2</li>
</ul>
</nav>
</div>
</div>
</div>
and give a fixed width to list elements at .item class
.item {
width:70px;
}
working demo
give them a fixed width, ie width:80px
I used the method shown in How to target the href to div
to target the href to div. It worked. But I need to add another level.
HTML
<ul >
<li class="active">home</li>
<li>settings</li>
</ul>
<div class="target">
<div id="m1">
<ul >
<li class="active">Item1</li>
<li>Item 2</li>
</ul>
</div>
<div id="m2">
<ul>
<li class="active">Item1</li>
<li>Item 2</li>
</ul>
</div>
</div>
<div class="target123">
<div id="subm1-1">
content1
</div>
<div id="subm1-2">
content2
</div>
<div id="subm2-1">
content3
</div>
<div id="subm2-2">
content4
</div>
</div>
CSS
.target > div {
display:none;
}
.target > div:target{
display:block;
}
.target123 > div {
display:none;
}
.target123 > div:target{
display:block;
}
My issue is when I click on the link, "item 1" in the content in appears in the correct place. But the content in disappears.
How can I stop this?
My divs are positioned next to each other. So one div doesn't overlap the other.
If I understand correctly what you're trying to do, this is not possible using the :target attribute. The target is always the part of the URL after the #, and there can always only be one target at a time.
This means that whenever you activate a target all the other elements are going to be hidden again. You cannot show contents based on two different targets at the same time using this method.
I have a nested list like:
<ul id="nav">
<li id="" class="">
Wedding
<div class="flyoutWrapper" style="display:block;">
<ul class="flyout fourCol">
<li id="" class="">
.....
</li>
<li></li>, etc
</ul>
</div>
</li>
</ul>
I want all the li's inside of class="flyout fourCol" to float next to each other.
This is what I want my dropdown to look like:
#nav .flyout.fourCol { width:900px; }
http://jsfiddle.net/t7esz/ (this works)
#nav .flyout.fourCol { width:auto; }
http://jsfiddle.net/sumcA/2/ (this doesn't work!)
If you only want it to expand, set the min-width property to a fixed value (like 900px). Keep width on auto.
I haven't inspected how your entire menu works, but setting that min-width on .flyout.fourCol only seems to work for the entire thing.