I'm currently running into this problem, that some elements like checkbox (label) and searchbutton (input) are always stacked above my navigation.
I tried a lot like setting opacity, positions, z-index (including a position which is not static), removed border backgrounds... but no success.
opacity: 1;
position: absolute;
z-index: 9998;
please check with position: relative; css
.search input {
border: 2px solid #ccc;
border-radius: 20px;
box-sizing: border-box;
font-family: "FontAwesome";
font-size: 16px;
padding: 12px 20px;
position: relative;
transition: width 0.4s ease-in-out 0s;
width: 100%;
z-index: 9999;
}
For those wich running on the same problem like me. It's because my nav-container was set to position: static !!
I changed it to position: relative now it's working fine !!
Related
I have a styled checkbox that is the child of a container along with some text. The reason the checkbox and text are children of a parent is so that they can sit next to each other and be centered vertically on the UI. This has worked fine for me; however, I've noticed that the checkbox starts to change from a perfect circle into more of an oval as text starts to wrap into multiple lines (on mobile the text is two lines long and on desktop it is only one line). How could I fix this so that the checkbox does not stretch as the text wraps into multiple lines? Below is my html and styling, thank you.
.opt-in {
display: flex;
align-items: center;
color: #f4a11e;
}
input[type='checkbox'] {
position: relative;
margin: 17px 15px 0 0;
cursor: pointer;
width: 20px;
height: 20px;
-webkit-appearance: none;
background: transparent;
border: 1px solid #f4a11e;
outline: none;
border-radius: 50%;
transition: 0.5s;
}
input[type='checkbox']:before {
content: '';
position: absolute;
top: 45%;
left: 50%;
width: 4px;
height: 10px;
opacity: 0;
border-right: 1px solid #f4a11e;
border-bottom: 1px solid #f4a11e;
transform: translate(-50%, -50%) rotateZ(40deg);
transition: 0.2s;
}
input:checked[type='checkbox']:before {
opacity: 1;
}
<div class="opt-in">
<input type="checkbox" v-model="optIn" id="checkbox" />
<label for="checkbox">Opt-in to receive the latest cloud insights and industry deep dives.</label>
</div>
In the CSS code in the input[type='checkbox'] {} section, try using min-width: 20px; rather than width: 20px;.
Worked for me in a test implementation with copy/pasted code although I had to set max-width in the properties of the opt-in div to test it.
I don't have a technical explanation but I believe it has something to do with the relative position or the display: flex overriding the specified width/height in pixels.
I'm using Bootstrap 4 for a custom wordpress theme. I've readed this short article where is explained how to create an animated underline on hover. On desktop all works fine but on mobile the underline will take the 100% of the width under the menu elements. Is possible to fix?
here is the css code I'm using:
.top{
position: relative;
color: black;
}
.top:hover{
color: rgb(28,67,63);
}
.top:hover:after{
width: 100%;
}
.top:after{
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0%;
border-bottom: 2px solid rgb(28,67,63);
transition: 0.4s;
}
To be more clear here is an image of the problem that is happening
mobile underline
I've solved using the inline-block display property on mobile.
.top{
display: inline-block;
}
First Try to arrange your CSS code, .top:hover::after must come after .top::after,
also, the trick that on mobile the element take the full width, so try to give the element specific width on mobile screens.
Try this code, it's work fine.
<div class="top">
Hi
</div>
.top{
position: relative;
color: black;
width: 50px;
}
.top::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0%;
border-bottom: 2px solid rgb(28, 67, 63);
transition: 0.4s;
}
.top:hover{
color: rgb(28, 67, 63);
}
.top:hover::after{
width: 100%;
}
I have animated my navigation buttons that expand upon hover, but they keep on disrupting the flow of the rest of the page. I've tried using z-index to take them out of the flow, but that isn't working, either. Is there a way to do this with out the buttons shoving everything out of whack? Here's my relevant code so far:
.btn-group .button {
background-color: teal;
border: 2px solid orange;
color: orange;
padding: 2px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
float: left;
font-size: 1em;
border-radius: 50%;
margin: 5px 0 5px 5px;
padding-left: 30px;
position: relative;
z-index: 1; }
.btn-group .button:hover {
background-color: cadetblue; }
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s; }
.button span:after {
content: '\00bb';
opacity: 0;
top: 0;
right: -20px;
transition: 0s;
padding-left: 10px; }
.button:hover span {
padding: 10px;
color: black;
font-size: 1.5em; }
.button:hover span:after {
opacity: 1;
right: 0;
color: black; }
Thanks for your help!
You have to limit your animations to properties that do not interfere with object's position and dimensions in the document flow.
Those are: transform, left, right, bottom and top. For the last 4, in order to work, you also need position:relative on the button. When using any of these, even though you see the element moving, its place is kept in the flow, just like it would still be there. Only its projected image is moved/transformed.
Example with transform:
.button {
margin: 1rem;
transition : transform .3s cubic-bezier(.4,0,.2,1);
display: inline-block;
border: 1px solid black;
padding: 1rem;
}
.button:hover {
transform: scale(1.1);
}
.red {
background-color: red;
padding: 1rem;
color: white;
}
<a class="button">Example with transform</a>
<div class="red">see? I'm not moving</div>
That's how the vast majority of web animations are done (using transforms).
As an alternative, if you really want to animate properties that would normally affect the rest of the document, you will need to remove your element from document flow. For that, you need to:
wrap your element in a wrapper (placeholder) of desired dimensions (which will never move and keep everything in place), and give the wrapper position:relative,
set position:absolute on the button.
Now you can animate anything on the button without affecting the rest of the document.
But remember, the wrapper needs to have proper dimensions, as the button, now being absolutely positioned, will no longer occupy any space in the document flow. Also, note that your button is now relative to its placeholder. If the placeholder moves, the button moves too.
Example with absolute positioning and wrapping:
.wrapper {
height: 5rem;
position: relative;
}
.button {
position: absolute;
top: 1rem;
padding: 1rem;
transition: all .3s cubic-bezier(.4,0,.2,1);
border: 1px solid black;
}
.button:hover {
top: .5rem;
padding: 1.5rem;
}
.red {
background-color: red;
padding: 1rem;
color: white;
}
<div class="wrapper">
<a class="button">Example with absolute positioning and wrapping</a>
</div>
<div class="red">see? I'm not moving</div>
That's the basics.
As a side note, best practices require you to limit animations to a very select and limited bunch or properties which do not hit browser performance: the bunch is made of exactly two items:
transforms
and opacity.
You animate anything else... boom!, your scroll begins to stagger on devices with limited resources. There is quite a lot to read on the subject, but here's a good one.
Setting a high z-index does not take the element out of the document flow, you need to use absolute positioning for your button.
i.e.
.btn-group{
position: relative;
}
.button{
position: absolute;
}
I am just getting back into coding and I would like to know what is the best method for adding heigh to my btn.
Here is the code -
Padding method
.nav-main li a {
display: block;
padding: 70px 10px 70px 10px;
color: #6CF784;
border-bottom: 10px solid white;
text-decoration: none;
}
Line-height method
.nav-main li a {
display: block;
padding: 0 10px 0 10px;
line-height: 150px;
color: #6CF784;
border-bottom: 10px solid white;
text-decoration: none;
}
I like to use line-height because it positions the baseline correctly to make the text appear in the middle of the element (whereas with padding it may be off-centre one way or the other based on the font)
Of course, this relies on you using a pixel value for line-height (as you are doing in your question) - using a numeric value like 1.5 may produce different results depending on the font.
I personally use padding as it gives me more control across browsers, as line height can vary on which font you are using, along with what fonts are installed/not installed on the clients' browser.
.link {
text-decoration: none;
color: aqua;
border: 2px solid aqua;
margin: 30px auto;
display: block;
width: 160px;
height: 40px;
line-height: 35px;
text-align: center;
position: relative;
overflow: hidden;
}
.link::before {
content: attr(data-text);
position: absolute;
width: 100%;
top: 0;
left: 0;
transform: translateX(-100%);
transition: 0.5s;
}
You will show the difference between the padding and line height
when you use pseudo element (before and aftere) =>
with line height the pseudo element take the same height of his parent
with padding the pseudo element do not take the height of his parent
I am building a site for a friend (http://pasionesargentas.com/sm/) with the fullscreen gallery with thumbnail flip (http://tympanus.net/codrops/2011/02/09/fullscreen-gallery-with-thumbnail-flip/). I didn't quite like the idea of the flip thing so I simply preferred to disable it and add a menu instead. The menu div css is something like
#top {
position:fixed;
background: transparent;
display: block;
z-index: 99999;
}
It works fine in Chrome, Safari, Explorer and Opera. But for some reason she can't see the menu on her iPad. Since I don't have an ipad I downloaded the Ripple Mission Control and it works fine too so I have no clue what's going on.
Now, the question: Do I have to do css different for tablet browsers (iPad)? Or it is the gallery that's messing up with the menu and covering it?
Had the same problem, wanted to use an overlaying div with a transparent png on top of another div. Found out that z-index will only work on an element whose position property has been explicitly set to absolute, fixed, or relative. Fixed my ipad z-index problem instantly.
.topbar {
display:block;
background: transparent;
height: 60px;
width: 1024px;
display: block;
margin: 0;
padding: 0;
z-index:6;
position:relative;
}
.middlebar {
display:block;
background: transparent;
height: 60px;
width: 1024px;
display: block;
margin: 0;
padding: 0;
z-index:5;
position:relative;
}
.bottom {
display:block;
background: transparent;
height: 758px;
width: 1024px;
display: block;
margin: 0;
padding: 0;
z-index:4;
position:relative;
}
.description {
position: fixed;
top: 5px;
left: 50px;
text-shadow: 1px 1px 1px black;
z-index: 5;
}
#nav:hover {
background: #829FB0;
opacity: 1.0;
filter: alpha(opacity=100);
z-index: 10;
}
#nav {
align: center;
background: #829FB0;
padding: 3px 7px;
display: inline;
opacity: 1.0; //change this later
filter: alpha(opacity=65);
-moz-border-radius: 9px;
border-radius: 9px;
z-index: 10;
}
The problem could be transparent overlying divs, so first replace your code with this code, where the divs/nodes that have to be placed higher are not transparent and then see, also use z-indexes that I have given, you do not need too much high values
When checking for errors in css make sure you make nodes visible and remove their opacity and never give too high values for z-indexes. Try this, if it does not work I will look closely.