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).
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>
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>
<div id="parent" style="height:250px;width:250px;display:inline">
<div id="child" style="height:100%;width:100%;z-index:10001"></div>
<select style="height:100%;width:100%;z-index:10000"><option/></select>
</div>
My requirement is to include the select and child div elements inside the parent div in such a way that the child div is on top of the select element and completely covers it. Later I want to hide the child div based on an event and make the select element visible.
Both child div and select elements should occupy the entire size of parent div each on their own.
how can I achieve this?
http://jsfiddle.net/dyBjZ/2
#parent {
position: relative;
overflow: auto;
}
.child {
position: absolute;
height:100%;
width:100%;
}
<div id="parent">
<div class="child">
<select>
<option>One</option>
<option>Two</option>
</select>
</div>
<div class="child" id="child">Click me</div>
</div>
Taking input from the comments above, I was able to solve my problem. Here is what I did. Posting it here in case someone else lands up on this page searching.
<div id="parent" style="height:250px;width:250px">
<div id="child" style="display:block;height:100%;width:100%"></div>
<div id="selectParent" style="display:none;height:100%;width:100%">
<select><option/></select>
<div>
</div>
Based on the javascript event, I toggle display from block to none for child div. And toggle display from none to block in selectParent.
First issue is to give the #parent div a size, thus remove display: inline from its style.
Next, you could toggle for both elements from display: none to display: block, and v.v. But to reduce this by half, you could use absolute positioning which takes the element out of the default markup layout, as shown in this example.
HTML:
<div id="parent">
<div id="child"></div>
<select></select>
</div>
CSS:
#parent {
height: 250px;
width: 250px;
position: relative;
}
#child {
position: absolute;
background: #aaa;
height: 100%;
width: 100%;
}
select {
height: 100%;
width: 100%;
}
#child.hidden {
display: none;
}
When i have a div with position: absolute, and in it is another div with position: absolute the inner div will position in the frame given through the outer (wrapper) div.
Now i want to create a class (css) called error_message that positions itself exactly in the center middle of the site, indifferent from where the it is called, so i need it to break out of every div wrapped around the error_message div.. how do i do this?
i had a similar problem with positioning a hoover-text centered below a floated image button list.
for me the solution was using the "fixed" value for the "position" property
position: fixed
then you can position your error message from top left of the body again.
i use another wrapper div to position all hoover texts center center.
found the solution here:
CSS nested Div with position absolute?
the code is not the code from the picture you see, the picture is just for illustration.
stylesheet in less format (see http://lesscss.org/)
<style>
.button
{
float: left;
position: relative;
a
{
&:hover, &:focus
{
.titlePos
{
.title
{
display: block;
}
}
}
.titlePos
{
position: fixed;
top:50%;
left:50%;
width: 400px;
margin-left: -200px;
.title
{
position:relative;
display: none;
top: 130px;
text-align: center;
}
}
}
</style>
html:
<div id="wrapper">
<div id="content">
<ul>
<li>
<div class="button">
<a href="#" >
<div class="buttonImage">
<img />
</div>
<div class="titlePos">
<div class="title">Button Hoover Text1</div>
</div>
</a>
</div>
</li>
<li>
<div class="button">
<a href="#" >
<div class="buttonImage">
<img />
</div>
<div class="titlePos">
<div class="title">Button Hoover Text2</div>
</div>
</a>
</div>
</li>
<li>
<div class="button">
<a href="#" >
<div class="buttonImage">
<img />
</div>
<div class="titlePos">
<div class="title">Button Hoover Text3</div>
</div>
</a>
</div>
</li>
<li>
<div class="button">
<a href="#" >
<div class="buttonImage">
<img />
</div>
<div class="titlePos">
<div class="title">Button Hoover Text4</div>
</div>
</a>
</div>
</li>
</ul>
</div>
</div>
You should try using css's position:fixed property, instead of position:absolute, for the error div. position:fixed will position an element based on the browser window, with no regard for where it falls in the DOM. If you want it to be centered in the window, regardless of window size, you could make the fixed-position div cover the entire screen (left: 0, right: 0, etc). and then text-align the error message inside of it.
I'm not sure why would you want that div to break out of parent div. Maybe try working on a fresh html structure for those?
http://haslayout.net/css-tuts/Horizontal-Centering and http://haslayout.net/css-tuts/Vertical-Centering
These should help you out!
I think the only way to have a div break out of all parent divs is to have an absolute positioning on all of them, which will obviously create its own set of problems.
Why not simply have a pre-defined, hidden div as a direct child of the body, instead of wrapping it in the markup. You can then easily position it as you want, and insert the error messages in it with the help of jQuery. An obvious advantage to this method is that you would only have to write this div once, and dynamically insert the error message into it. I would even suggest having a look at jQuery UI which allows you to easily create dialogs, both normal and modal, besides tons of other features.
UPDATE
Since JS is not allowed, an easy way to do this would indeed be displaying the div only if there was an error. So the PHP code would be ...
if (isset($error)) {
echo '<div class="show_error">' . $error . '</div>';
}
... and the CSS class for it would be ...
.show_error {
width: 400px; // error element's width
height: 200px; // error element's height
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px; // minus half the height
margin-left: -200px; // minus half the width
}
Of course, you can further style the error div as you wish, but these are needed to position it dead-center.
Hope this helps !
I have found a solid CSS solution here:
https://front-back.com/how-to-make-absolute-positioned-elements-overlap-their-overflow-hidden-parent/
Let’s add another parent and move the position:relative one level up
(or, in your context, you could maybe simply use an existing upper
parent).
HTML
<div class="grand-parent">
<div class="parent">
<div class="child"></div>
</div>
</div>
CSS
.grand-parent {
position: relative;
}
.parent {
/*position: relative;*/
overflow: hidden;
}
.child {
position: absolute;
top: -10px;
left: -5px;
}
Result:
I'm using the jQuery Cycle plugin to rotate images in a slideshow type fashion. That works fine. The problem I'm having is getting these images (of different sizes) to center in the containing div. The images are inside a slidshow div that has it's position set to absolute by the Cycle plugin.
I've tried setting line-height/vertical-align and whatnot but no dice. Here is the relevant HTML and CSS
HTML:
<div id="projects">
<div class="gallery">
<span class="span1">◄</span><span class="span2">►</span>
<div class="slideshow">
<img src="images/img1.png" />
<img src="images/img1.png" />
<img src="images/img1.png" />
</div>
</div>
</div>
CSS:
#main #home-column-2 #projects
{
width: 330px;
background: #fefff5;
height: 405px;
padding: 12px;
}
#main #home-column-2 #projects .gallery
{
width: 328px;
height: 363px;
position: relative;
background: url('images/bg-home-gallery.jpg');
}
#main #home-column-2 #projects .gallery img
{
position: relative;
z-index: 10;
}
And in case you want to see it, the jQuery:
$('#home-column-2 #projects .gallery .slideshow').cycle(
{
fx: 'scrollHorz',
timeout: 0,
next: "#home-column-2 #projects .gallery span.span2",
prev: "#home-column-2 #projects .gallery span.span1"
});
Any ideas on getting these images to center?
Try this:
http://www.brunildo.org/test/img_center.html
Vertical centering is a pain! Here's what the W3C page says about the vertical center:
CSS level 2 doesn't have a property
for centering things vertically. There
will probably be one in CSS level 3.
But even in CSS2 you can center blocks
vertically, by combining a few
properties. The trick is to specify
that the outer block is to be
formatted as a table cell, because the
contents of a table cell can be
centered vertically.
This method involves a little jquery, but works fantastic in most situations...
let me explain:
if all the images of the slideshow are contained within their own element div pos:absolute and those images are pos:relative, then on a $(window).load() you can run a .each() and find each img in the slideshow and adjust it's top positioning to be offset a certain number of pixels from the top..
jcycle automatically sets each parent div containing the image to pos:absolute on every onafter() so it's useless to apply this pos adjustment to them... instead target each img you have set to pos:relative...
Here is the example:
$(window).load(function() {
// move all slides to the middle of the slideshow stage
var slideshowHeight = 600; //this can dynamic or hard-coded
$('.slideImg').each(function(index) {
var thisHeight = $(this).innerHeight();
var vertAdj = ((slideshowHeight - thisHeight) / 2);
$(this).css('top', vertAdj);
});
});
and this is the html it's working on...
<div class="slideshow" style="position: relative; ">
<div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img0">
<img class="slideImg" src="/images/picture-1.jpg" style="top: 0px; "><!-- the style=top:0 is a result of the jquery -->
</div>
<div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img1">
<img class="slideImg" src="/images/picture-1.jpg" style="top: 89.5px; "><!-- the style=top:89.5px is a result of the jquery -->
</div>
<div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img2">
<img class="slideImg" src="/images/picture-1.jpg" style="top: 13px; "><!-- the style=top:13px is a result of the jquery -->
</div>
</div>
just make sure
.slideImg {
position:relative;
}
I think that's everything... I have an example, but it's on a dev site.. so this link might not last.. but you can take a look at it here:
http://beta.gluemgmt.com/portfolio/rae-scarton-editorial.html
The positions are relative according to the style sheet, so did you try setting them to display: block and margin-top: auto; margin-bottom: auto; ?
Another option is to align them manually in javascript based on the containing div's height.
You need to nest two divs inside each cycle item. The first must have the display: inline-table; and the second must have display: table-cell; both these divs have vertical-align: middle.
So the structure would look something like this:
<div class="slide-container">
<div class="slide">
<div class="outer-container">
<div class="inner-container">
Centered content
</div>
</div>
</div>
<div class="slide">
<div class="outer-container">
<div class="inner-container">
Centered content
</div>
</div>
</div>
</div>
With the following css:
.slide-container {
height: 300px;
}
.outer-container {
height: 300px;
display: inline-table;
vertical-align: middle;
}
.inner-container{
vertical-align: middle;
display: table-cell;
}
You can see it working here http://jsfiddle.net/alsweeet/H9ZSf/6/