I am observing this strange behavior with the radio buttons. Whenever I set the z-index of the parent div I am not able to select the radio buttons.
Here is the fiddle link: http://jsfiddle.net/x7rm63n9/2/. Try to select the buttons inside the main box.
The css style for the main div is:
.main_box
{
position: relative;
background-color: #444;
width: 65%;
margin: 30px auto;
height: 450px;
z-index: -6; /* IF I REMOVE THIS LINE I CAN SELECT THE RADIO BUTTONS*/
border: 12px solid #fff;
}
Why is this happening? Is there any workaround for this without changing z-index?
I tried to set up the simple demo. (http://jsfiddle.net/juruf6a8/1/) It works fine here.
Thanks in advance,
Try this I have made the update and it is working on my end.
http://jsfiddle.net/x7rm63n9/4/
Here is what you have to do:
-remove the z-index:-6 of the "main-box" div
-wrap the banner div inside another div called "banner-container" and write this code for it
.banner-container{
z-index:1;
position:relative;
}
.banner-container:after{
clear:both;
content:'';
display:block;
}
You could just make the radio buttons that are inside main_box higher if you must keep the z-index of -6 on the main_box itself.
.main_box, input[type=radio]
{
z-index:0;
}
http://jsfiddle.net/x7rm63n9/3/
Related
At the bottom of my page there are 3 buttons. "Send, Save and Cancel" buttons. The Save and Cancel buttons are the same height but the "Send" button is different from the other two. Why is this happening?
I read on another post that said elements render buttons different from normal buttons so I tried to fix it with the solution given but it didn't work. I also tried removing element but it still didn't work. Thanks for your help!
Buttons Styles
background-color: #8f81e8;
color: #fff;
border-radius: 5px;
text-transform: uppercase;
font-weight: 300;
font-size: 16px;
cursor: pointer;
padding: 1rem;
CodePen
It's because your send is input while other elements are button.
Add border: none; to your css
you can give static height to all three buttons.
You have two different divs: .user-messages (the left one) and .settings the right one.
The left one contains an input, while the right one contains two buttons. So you can either add border:none to the left one to make the border disappear and then re-arrange your layout to use a button instead of an input.
Update
Wrap the buttons into a seperate div below the div of the two pages and do the following:
div {
display:flex;
justify-content:space-around;
}
button {
width: 100%;
margin: 5px; /* or whatever you want to have */
}
<div style="width: 100%; background-color: green;">
<button type="button">A</button>
<button type="button">B</button>
<button type="button">C</button>
</div>
Is the result of my snippet the desired outcome?
Seems to be the display: flex on the settings-btn-box that is causing it. One solution could look something like this:
.settings-btn-box {
/* display: flex; */
}
.settings-btn-box button {
width: 49%;
}
.btn-save {
/* margin-right: 10px; */
}
.btn-cancel {
/* margin-left: 10px; */
float: right;
}
Personally, I'm not a big fan of float, but since it's the last element in the div it should be fine.
Div containaer and p element overlapping another Div that contains an image that needs to respond to a :hover CSS event causing only a small portion of that Div container to be able to sense the mouse hovering over it.
How do I solve this?
z-index isnt effective for some reason either.
Try and hover your mouse over the image.
Here Is The JSFiddle.
As #colandus said adding the position: relative and the z-index to the img should indeed do the trick.
However, it seems to me like you are over complicating things a bit. Why the position relative on the p? that is the one that is causing the problem...
What you are trying to do is default behavior if you use some simpler html / css. Something like this:
the HTML with some div's removed:
<div class="insp">
<h3>Thomas Edison</h3>
<img src="http://www.placehold.it/250x150">
<p>Lorem Ipsum is s...</p>
</div>
and the css with the position: relative removed from the p:
.insp {
border: 2px solid black;
margin: 10px 0px;
padding:10px;
}
.insp h3 {
margin-top:0px;
background-color:#FFDE5C;
}
.insp img {
float:left;
border: 5px solid #FFDE5C;
height:150px;
margin: 0 20px 20px 0;
}
.insp img:hover {
border: 5px solid #ffffff;
}
.insp p {
margin: 40px 40px 40px 80px;
}
And as you can see (http://jsfiddle.net/7fvcD/4/), it looks exactly the same and there is no hover issue anymore.
Put image as position: relative, then z-index will work.
Add the following CSS:
.insp-image img {
position: relative;
z-index:1000;
}
http://jsfiddle.net/7fvcD/5/
Don't need to change your markup ;)
Try this approach: Put the <div> with the <img> inside the <p> tag and set some margin to the img div.
Updated JsFiddle
DEMO LINK
I am trying to include a tooltip inside the table but when mouse hovers it streches the tables and tooltip text isn't showing up correctly as well on the website.
How can I fix this?
CSS:
.infotext {
background: url(http://s17.postimg.org/k71a0r6m3/info_Icon.png) 0 0px no-repeat;
width: 15px;
height: 15px;
display: inline-block;
vertical-align: text-bottom;
}
If you add the following CSS, it should work
td .tooltip {
position:absolute
}
http://jsfiddle.net/z33j5/2/
Without this, the tooltips had a position:relative which meant they were rendered in the table cell
I have implemented the following website: link
There are two textfields in the header part of the website. If you click on a textfield, a calender pops up. My problem is that the calender is not shown on the foreground although I set the css properties position: absolute; and z-index: 999;. What is the problem and how can I solve it?
You can add the following to your css
.row-3 {
overflow: visible;
}
Just remove overflow:hidden; from here #header .row-3
#header .row-3 {
background: url("images/header-tail.gif") repeat-x scroll left top transparent;
height: 276px;
}
see the attached image how i did
I have a menu and a search box. I would like to put the search box along with menu items. But my menu is being built in a different file in a div called 'custommenu' which uses the following css:
#custommenu {
position:relative;
z-index:999;
font-size: 14px;
margin: 0 auto;
padding: 10px 16px;
width: 918px;
background-color: #FB0A51;
border-top-left-radius: 10px 10px;
-moz-border-top-left-radius: 10px 10px;
border-top-right-radius: 10px 10px;
-moz-border-top-right-radius: 10px 10px;
}
Whereas I have my search box in a separate file which looks like this:
<div class="header">
some code
<div class="quick-access">
some code
<php echo $this->getChildHtml('topSearch') ?>;
</div>
</div>
I tried adding the following to the css file so that the search box comes on top of the menu but it did not work
.header .form-search {
position:absolute;
right:29px;
z-index:1000;
top: 80px;
width:315px;
height:30px;
padding:1px 0 0 16px;
}
Still the search box gets hidden behind the menu. I would like to have the search box n the menu. How do i do it?
EDIT: Here's the css of the div's which contains the search box,
.header { width:930px; margin:0 auto; padding:10px; text-align:right; position:relative; z-index:10; border-top:3px solid #3C3C42;}
.header .quick-access { float:right; width:600px;margin-top:-125px; padding:28px 10px 0 0; }
.header .form-search { position:relative; top: 100px;left: 300px; z-index:9999; width:315px; height:30px; padding:1px 0 0 16px; }
And this is how it looks right now, (purple links - quick access, white box is search which is going behind the pink 'custommenu' area. I would like to have the white box on the pink area. And all of this is inside 'header')
#all
Sorry for replying very late. But I found the solution after a little bit of fiddling. I set the z-index of my header to a higher value than my custommenu. Since my header contains the search box it needed to have a higher value for the search box to come over the menu.
The code looks like this now
.header{ position: relative; z-index: 4000; }
.header search { position: relative; z-index: 99999; }
.custommenu { position: relative; z-index: 1000 ;}
This perfectly got my search box on top of my menu aligned. Thanks again for all those who helped. Appreciate it.
Try with float? or display:block;
If I was using this code, I would write the css like this:
position:relative;
left:some value;
top:some value;
Z-index: -999
The search box appearing behind the menu sounds like a z-index issue - perhaps the container of the menu has a higher z-index to the search box, try changing the searchbox z-index to 999999.
z-index requires non-static positioning however it is not clear from your code examples which type of positioning is actually used by the elements you are trying to stack with z-index.
Either way here is a very helpful tool which might help you determine which type of positioning you have to use for your elements in regards to how they relate.
http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp