If we visit link , search for text "Save" using CTRL + F, you can see "Save Design" button is clickable.
We want to move the button to upside, so when we increase value to "bottom:117px;" , then button is not clickable
#aitcg-control-panel .apply-but {
float: right;
margin-right: 0;
position: relative;
bottom: 77px; /* or bottom:117px; or top: -146px; */
left: 400px;
}
Comment or delete all your CSS of this selector #aitcg-control-panel .apply-but and use this CSS fix as:
#aitcg-control-panel {
position: absolute;
right: 110px;
bottom: 143px;
z-index: 1;
}
.product-essential {
position: relative;
}
this will solve your issue.
As instead of moving the child element, moving the parent element in your case will be a more wise decision for future debugging.
Because other elements are not using absolute position property and overlapping this button.
Use z-index
#aitcg-control-panel .apply-but {
float: right;
margin-right: 0;
position: relative;
bottom: 177px;
left: 400px;
z-index: 1;
}
This will bring this button to front.
It is happening because your div with class .product-shop has big width so is over the button. you can change its width using this code and the make margin-top:-50px to button.
#media only screen and (min-width: 1824px)
.product-view .product-shop {
width: 25%;
}
Or change button z-index
#aitcg-control-panel {
z-index: 2;
Related
I have read that in order for z-index to take effect, the CSS elements involved need to have "position" attributes. So I have a menu that I would like to appear over an IMG when someone clicks on the menu icon. I have these styles for the menu and the image in the content area ...
.menu-btn div {
position: absolute;
left: 100%;
top: 0%;
padding-right: 8px;
margin-top: -0.50em;
line-height: 1.2;
font-weight: 200;
vertical-align: middle;
z-index: 99;
}
#personImgDiv {
position: relative;
z-index: 100;
display: table-cell;
width: 80%;
}
However, when I click on the menu icon, the menu is still appearing behind the image -- https://jsfiddle.net/bdcmka1r/2/ . What else am I missing? How do I get the menu to always appear in front?
This is because you're using the wrong selector. .menu-btn is the button class, and it will only affect this button, also there is no way a button can be treated as a container element such as div, nav, header ..etc. Your correct selector will be nav since your menu contained within nav tags. So, you need to add the position and z-index properties to nav selector instead.
nav {
display: none;
width: 100vw;
padding: 0rem;
background-color: red;
position: absolute;
z-index: 9999;
right: 0%;
top: 100%;
text-align: left;
}
#personImgDiv{
position: relative;
z-index: 100;
}
header{
z-index: 101;
}
I see. you have used z-index:100 in porosinIngDiv and you want to display menu over on image so you have to use z-index more in header then #personImgDiv i have given answer on top it will more clear
website: www.vocabularybuilder.co
I want the logo and the navigation to be clickable, it used to work but i did something and now it doesn't :/
Add z-index: 1 and position: relative for this class.
.site-header__logo {
text-align: center;
margin: auto !important;
max-width: 400px;
font-size: 1.85714em;
top: 0;
height: 90px;
display: table;
z-index: 1;
position: relative;
}
Try adding this to your css:
.nav-bar {
pointer-events:none;
}
// for the 2 links
li a {
pointer-events: auto;
}
Hope it'll work. This was already answered here Click through a DIV to underlying elements. ctto
I have a problem with some CSS ,maybe someone can help me out .
I dont see any margin or padding there that will be the problem.Only that the height is to big or something.
I am using wordpress Sydney theme.
This is the website.
How can i get the space out between the banner and the content of the page ?
Here is a screenshot of what i mean.
Thank You.
#sf-slider-overlay {
position: absolute;
top: 230 px;
z - index: 999;
width: 1170 px;
margin - left: auto;
margin - right: auto;
}
you only have to do this..
Position : absolute
Will work ☺
There is one element (#sf-slider-overlay) with wrong position.
#sf-slider-overlay {
position: relative;
top: 230px;
z-index: 999;
width: 1170px;
margin-left: auto;
margin-right: auto;
}
Change it to,
#sf-slider-overlay {
position: absolute;
top: 230px;
z-index: 999;
width: 1170px;
margin-left: auto;
margin-right: auto;
}
So Simple just add below code to custom css style of your theme
#sf-slider-overlay {
position: absolute;
}
Your problem will be solved or put above code in your page css.
That's because the space isn't caused by any margin or padding. The space is caused by an element that has been moved out of the way using position relative.
#sf-slider-overlay {
margin-left: auto;
margin-right: auto;
position: relative;
top: 230px;
width: 1170px;
z-index: 999;
}
If you change this to have a position:absolute; it fixes the extra space that you had.
Like this:
#sf-slider-overlay {
margin-left: auto;
margin-right: auto;
position: absolute;
top: 230px;
width: 1170px;
z-index: 999;
}
You may have to fiddle with the positioning slightly to get it right, I noticed that once absolute has been set, the word "Domestic" sits right on the edge of the screen, so perhaps add a left:2em; to the property, or even padding-left:2em;
You are using position: relative; in the element #sf-slider-overlay. position: relative; takes an element out of the float, but the space remains there.
You can use position: absolute; but have to set the left property to get the same result as now:
#sf-slider-overlay {
position: absolute;
left: 50%;
translate: translateX(-50%);
}
Hi guys I'm trying to make a fancy style border that kind of highlights a block of text, its basically just two sharp lines that intersect (also gonna make them have a slow animated pulse thats subtlety noticeable, this is the code I have so far:
span.fancyTop::before {
position: relative;
right: -50px;
display: block;
width: 80%;
float: right;
height: 1px;
background: white;
z-index: 2;
content: "";
}
span.fancyRight::after {
position: relative;
right: -400px;
top: -20px;
display: block;
content: "";
float: right;
z-index: 2;
background: white;
height: 200px;
width: 1px;
float: right;
}
the only problem is it seems to push my content around:
I want to make it so that I can have the content fit nicely inside the lines but it seems to push it down, I also need it to be responsive for mobile. I'm trying to avoid using absolute positioning and I'd like to be able to use the classes reliably wherever and have the expected result. I'm not a front end designer by any means so any help would be fantastic. Thanks.
Absolutely positioned elements do not take up the DOM Space. So you may use this:
span.fancyTop::before {
position: absolute;
right: -50px;
display: block;
width: 80%;
float: right;
height: 1px;
background: white;
z-index: 2;
content: "";
}
span.fancyRight::after {
position: absolute;
right: -400px;
top: -20px;
display: block;
content: "";
float: right;
z-index: 2;
background: white;
height: 200px;
width: 1px;
float: right;
}
And make sure you position the parent relatively.
span.fancyRight, span.fancyTop {
position: relative;
}
If you change the positioning given to absolute, and add:
.fancyTop, .fancyRight { position: relative; }
I believe you'll get the result you're looking for. Absolutely-positioned elements are positioned relative to the container it's inside, so long as that container has a position associated with it.
If you want to get really fancy, just change .fancyTop and .fancyRight to .fancy and add the :before and :after pseudoclasses to the one class.
You may run into some other issues with the code you gave, like the span tag is an inline tag. I put together a fiddle for you as an example: https://jsfiddle.net/stgermaniac/p3d0a1ez/
So, I modified a wordpress tabs widget so that I could make it look like in the image I attached, only that I have one problem.
I can't make the ribbon edges stay on top of the website layout.
I have a demo of what I've done so far here.
So I added this code to show the images:
#wp-tabs-1 .ui-tabs .ui-tabs-nav:before{
content: url(../images/l-corner.png);
width: 47px;
height: 43px;
position: absolute;
left: -5em;
z-index: 999;
}
#wp-tabs-1 .ui-tabs-nav:after{
content: url(../images/r-corner.png);
width: 47px;
height: 43px;
position: absolute;
right: -5em;
z-index: 999;
}
I tried all the positioning combinations with the z-index that I could, and nothing seems to work, to make the ribbon edges stay on top.
They're hidden by .grid { overflow: hidden }. Change it to .grid { overflow: visible } or simply remove it and it should work.