This question already has answers here:
Why can't an element with a z-index value cover its child?
(5 answers)
Closed 3 years ago.
I have 2 sections (banner and content section)
content section overlaps in the banner because of the design. So I need to bring front the content section.
My problem is my search element, if you are going to add keyword it auto suggest and the suggestion box will appear on the banner just like searching on google. but the problem is the suggestion box also moved the back of the content section (behind the 3 images).
<div class="body">
<div class="section-banner">
<div class="search-input">
<input type="text" value="search button here">
<div class="float-suggestion-box">
<!--Suggestion Box code here-->
</div>
</div>
</div>
<div class="section-content">
<img src="#1"/>
<img src="#2"/>
<img src="#3"/>
</div>
<div>
<stlye>
.section-banner
{
z-index: -1;
position: relative;
}
.section-content
{
z-index: 9;
position: relative;
}
.search-input .float-suggestion-box
{
z-index: 9999;
position: relative;
}
</style>
I need make the float suggestion box at the front. please help me thank you!
Just tart typing
var sugg = document.querySelector('.float-suggestion-box');
function openSugg(el){
if(el.value) {
sugg.innerHTML = ['abs','def', 'ghi', 'jkl', 'mno', 'pqr'].map(t => "<p>"+t+"</p>").join('');
} else {
sugg.innerHTML = '';
}
}
.section-banner
{
position: relative;
}
.section-content
{
position: relative;
}
img {
width: 30%;
}
.search-input .float-suggestion-box
{
z-index: 1;
position: absolute;
top:100%;
min-width: 300px;
left: 0;
background-color: #d1d1d1;
}
<div class="body">
<div class="section-banner">
<div class="search-input">
<input type="text" value="search button here" oninput="openSugg(this)">
<div class="float-suggestion-box">
<!--Suggestion Box code here-->
</div>
</div>
</div>
<div class="section-content">
<img src="https://data.whicdn.com/images/172081452/original.gif"/>
<img src="https://data.whicdn.com/images/172081452/original.gif"/>
<img src="https://data.whicdn.com/images/172081452/original.gif"/>
</div>
<div>
Related
I have in my page the following section:
Screenshot of the bottom of my page
Basically i have a fixed div with some buttons that we show on the bottom of the page. The thing is, sometimes we include only one button, sometimes we include four or five. When you resize the page, the buttons get pushed down, this is the normal behaviour I guess:
What happens when I resize
I was wondering, is it possible to reverse the direction the buttons are being pushed towards? As in, force the div to take more space above itself, and not downwards, therefore keeping the buttons visible?
Our fixed element has the following CSS, in case it is useful
.actions_fixbar {
position: fixed;
bottom: 0px;
right: 0px;
width: 100%;
z-index: 9;
background: #fff;
height: 50px;
box-shadow: 0px 0px 5px 0px #ddd;
}
Remove height attribute.
let a = 1;
function addButton() {
$('#footer').append('<button>Button '+ ++a+'</button>');
}
#footer {
position: fixed;
width: 100%;
bottom: 0;
background: #c4c4c4;
}
button {
width: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="addButton()">Add more button</button>
<div id="footer">
<button>Button 1</button>
</div>
Try this with bootstrap.The buttons are just placeholders for a quick demo.Replace them with your actual elements
<style>
footer{
position: fixed;
bottom: 0;
width: 100vw;
}
</style>
<footer>
<div class="container">
<div class="row ">
<div class="col">
<button>Back</button>
</div>
<div class="col">
<button>Submit</button>
</div>
<div class="col">
<button>Request to update</button>
</div>
<div class="col">
<button>Export by default</button>
</div>
</div>
</div>
</footer>
I have an image in the background, which is behind my form. As a result it won't let me place the cursor inside the text field.
https://jsfiddle.net/RE006/4rat11xc/1/
HTML:
<div id = "navButton">☰ Menu</div>
<div class="topnav" id="topNav">
×
<a href=#>Home</a>
Drinks
Food Menu
Contact
</div>
<div>
<header>
<h1>Header</h1>
</header>
<div class= "container">
<main>
<div id="cup"></div>
<form action="registration.html" method="get" name="registration_form" id="registration_form">
<label for="first_name">First Name:</label>
<input type="text" id="first_name" name="first_name">
<span>*</span><br>
</form>
</main>
<!-- end .container --></div>
</div><!--end of pushDown id-->
</body>
CSS:
label, input, select {
margin: 10px 0px;
z-index: 9997;
}
/* cup image background */
#cup {
background-image: url(images/cup.png);
background-repeat: no-repeat;
background-size: contain;
content:'';
filter: alpha(opacity=5); /* For IE8 and earlier */
height: 400px;
left: 20%;
opacity: 0.5;
position: absolute;
top: 100px;
width: 200px;
}
https://jsfiddle.net/RE006/4rat11xc/
You can resolve this specific issue in two ways:
#cup { z-index: -1; }
/* or */
#registration_form { position: relative; }
The reason this is happening is because the form is still position: static. Elements with position static are unaffected by positioning properties like top and z-index, so the other elements on the page that are not static are basically on a different "plan of existence" (there's probably a better technical term for this).
Changing #cup to be explicitly in the back will fix this. When you change the form to to relative, it moves into the same "plane of existence" as the non-static elements and therefore is stacked according to its position in the DOM (on top of #cup).
<div>
<div class="row">
<div class="col-md-4">
<div class="cta-item cta-1">
<a href="#">
<div class="hover"><p>Serving food fine to fast. Come <span class="arrow">Hungry</span></p></div>
<p class="cta-title">Visit</p>
</a>
</div>
</div>
<div class="col-md-4">
<div class="cta-item cta-2">
<a href="#">
<div class="hover"><p>Serving food fine to fast. Come <span class="arrow">Hungry</span></p></div>
<p class="cta-title">Shop</p>
</a>
</div>
</div>
<div class="col-md-4">
<div class="cta-item cta-3">
<a href="#">
<div class="hover"><p>Serving food fine to fast. Come <span class="arrow">Hungry</span></p></div>
<p class="cta-title">Eat</p>
</a>
</div>
</div>
</div>
</div>
<script>
$(document).ready(cta);
$(window).resize(cta);
function cta() {
var ctaWidth = $('.cta-item').width();
var newHeight = ctaWidth - 40;
$('.cta-item').css( 'height', newHeight );
}
</script>
My question is how to do height = width - 40px for particular element by pure css?
Thanks.
If you need CSS to work in older browsers, too, there is a way utilizing the fact, that vertical padding is always calculated in relation to the parent element’s width. So you can do like this to enforce the height:
// additional styles when Bootstrap css is loaded
.cta-item {
position: relative;
background-color: #ffcccc;
*zoom: 1;
}
.cta-item::before {
width: 0;
float: left;
display: block;
content: ' ';
padding-bottom: 100%; /* makes height match width */
margin-top: -40px; /* value substracted from height */
}
// clearfix
.cta-item::after {
content: ' ';
display: table;
clear: both;
}
Working example: https://jsfiddle.net/7m5vyaqs/1/
It works like a min-height. If you want it to be a max-height, you have to wrap the .cta-item’s contents into a container and position it absolute. Like:
.cta-item > *:first-child {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
Here's my HTML:
<div class="image-container" >
<div class="image-overlay">
dsfsadfdsafjhjkdhfkjashflksadhjfklasdjhfklsjdkfhasdjkhfsjkhdjkfs
</div>
<div class="img-user">
<img src="/images/flandre.jpg" width="220" />
</div>
</div>
And the CSS:
.image-container {
position: relative;
}
.img-user, .img-overlay {
position: absolute;
top: 0;
left: 0;
}
.img-overlay {
position: absolute;
z-index: 10;
}
But <div class="image-overlay"> appears underneath <div class="img-user">.
I'm trying to follow the example in the top answer of this question, and it seems like I'm doing everything similar, but it's not working.
You have a typo in your classes.
You're writing img-overlay in your css.
You're using image-overlay in your html.
I can't seem to figure this out.
I want to have a system whereby an image will change to another image upon hover over.
In my html I have:
<div class="linkyimage">
<img src="image/red.png" alt="red" />
<p class="hovvery"<img src="image/black.png"></p>
</div>
And then in my css:
.linkyimage{
position: relative;
height: 250px;
width:250px:
}
.hovvery{
position: absolute;
height: 250px;
width:250px:
visibility: hidden;
opacity: 0;
}
.linkyimage:hover .hovvery {
visibility: visible;
opacity:1;
}
Yet nothing seems to happen for me. Where am I going wrong?
edit:
Still can't seem to get any effect.....
.linkyimage{
position: relative;
height: 250px;
width:250px;
}
.hovvery{
position: absolute;
height: 250px;
width:250px;
visibility: hidden;
opacity: 0;
}
.linkyimage:hover .hovvery{
visibility: visible;
opacity:1;
}
and html:
<div id="content">
<div class="linkyimage">
<img src="image/red.png" alt="red" />
<p class="hovvery"<img src="image/black.png" /></p>
</div>
<img src="image/yellow.png">
<img src="image/lblue.png">
<img src="image/green.png">
<img src="image/brown.png">
<div class"linkyimage">
<img src="image/dblue.png" alt"blue" />
<p class="hovvery"<img src="image/black.png" /></p>
</div>
</div>
I'm going for sort of a gallery of images, which on mouse over change to the black image- in the futuer I will make it so a description of the image appears over it but for now trying to get the basics going!
Working FIDDLE Demo
You didn't close p in this line:
<p class="hovvery"<img src="image/black.png"></p>
Correct code:
<div class="linkyimage">
<img src="image/red.png" alt="red" />
<p class="hovvery"><img src="image/black.png" /></p>
</div>
Also you have syntax error in your CSS here:
width:250px: /* it must be semicolon ; at the end */
Change it to this:
width: 250px;