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.
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
I have a little pseudo modal I am building for my app that takes over the screen for a moment when a user clicks the button. I have it set as position fixed so it can overtake the entire screen infront of the user. I have it show and hiding right now with just toggling between display: block and display: none, my css right now just looks like so :
(SCSS) :
.sort-fullscreen {
display: none;
top: 0;
left: 0;
right: 0;
height: 100vh;
width: 100vw;
background-color: $modal-bg-color;
position: fixed;
z-index: 101;
transition: all 0.5;
&.open {
display: block;
}
}
And there is just a
<div class="sort-fullscreen">
... users content
</div>
Sitting at the bottom of my page.
So this works fine, however I am trying to figure out if there is a way to animate the position fixed coming onto the page - perhaps sliding on and off?
Initially - I tried something like this
.sort-fullscreen {
display: block;
top: 0;
left: -100%;
right: 0;
height: 100vh;
width: 100vw;
background-color: $modal-bg-color;
position: fixed;
z-index: 101;
transition: all 0.5;
&.open {
left: 0%;
}
}
However, this does not seem to work for me. I cannot seem to find a clean way to animate a position fixed onto the page. Any help on how to achieve this would be appreciated. Thanks!
Your code seemed to work for me, albeit after adding 's' in your transition time:
transition: all 0.5s;
Fiddle: https://jsfiddle.net/dt2j6872/1/
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;
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/
I created a little Tooltip thats in a Container. So there a two divs both with position: absolute;. They have to be position absolute or otherwise they will mess up the whole design.
.container_1 {
position: absolute;
top: 20px;
left: 20px;
}
.container_2 {
position: absolute;
}
<div class="container_1"><div class="container_2">Full Name-Name</div></div>
I also have a CSS Triangle in the first container so that's why there are two containers.
In the Tooltip there is shown the Full Name of a user. But now I have the problem that the div isn't as wide as the content. So I fixed it through replacing space with but now there is the same problem with dash's. But the problem doesn't get fixed by replacing the dash with –. Anybody knows a solution?
CSS:
.container_1 {
position: absolute;
top: 20px;
left: 20px;
}
.container_2 {
position: absolute;
width: 95px;
overflow: hidden;
white-space: nowrap;
}
http://jsfiddle.net/yG5eF/
Edit: Sorry, totally misread it the first time.