z-index not stacking properly [closed] - css

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have this page HERE. And the CSS is HERE. I would like <div id="main-img"> to be behind <header>. I have done z-index so many times before but I just cannot figure out what I'm missing here.
Thanks!!

Your div header has position relative, z-index only works with same position type
Try to change your style of your header like this:
header {
top:0;
left:0;
position: absolute;
height: 172px;
max-width: 980px;
z-index: 1;
}

Related

Can anyone help me with aligning a icon by CSS? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I am unable to align this icon with others by CSS,
Can anyone one help me with aligning this? The page link is https://merchla.my/my-account/
TIA.
On this class here <ul class="jssocials-shares" id="wpuf_social_link"> add display: flex;
ul.jssocials-shares li.jssocials-share-google a img {
width: auto;
height: 1em;
Remove all the css code from below code
ul.jssocials-shares li.jssocials-share-google a { }

Fixed footer via CSS only [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I want to make the class .cart to be fixed at the bottom the the screen at all times like a fixed footer. Currently user has to scroll all the way to the bottom of the page to view this div. I have tried the following css but to now avail.
Although this code works fine for my in JS fiddle but not on my webpage (link below)
JS Fiddle -- > http://jsfiddle.net/Lec5yu1d/2/
My webpage -- > http://omgjewelz.com/create-your-set
.cart { position: fixed;
    left: 0;
    bottom: 0;
    width: 100%; }
Hi adding this code to your style will make it work,
You need to make footer sticky along with positioning it, So here I added bottom:0px for you.
footer.site-footer {
position: sticky;
bottom: 0px;
}
For better view, I will suggest you to use background white behind the text div, as right now its transparent so it will mess up with content,
.footer-bottom {
background: white;
}

Wordpress CSS: Center Iframe Object [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I need to center this: https://www.nologo.surf/4-fun/ on 360º image isnt center...
Thanks
On your div with the class threesixty-image add this:
.threesixty-image {
margin: auto;
}
I tested in browser and that should center it for you.
Just add this code in your CSS
.threesixty-image {
margin:0 auto;
}

Css issue with my navigation [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have a sticky navigation, but my problem is the navigation jumps a little as I begin scrolling
http://testdev.co.za/tyme/info/
Can anyone show me in the css where the problem is.
You need to fix the position of your navigation bar using this code
position: fixed;
may be it will help you
You need to remove the padding-top: 25px from the .l-canvas.headerpos_fixed .l-header.state_sticky class in custom-vb.css.
Then you need to add padding-top: 25px to the .l-canvas.type_wide .l-subheader, .l-canvas.type_boxed .l-submain class in the same css file.
Sooooo, in custom-vb.css:
.l-canvas.headerpos_fixed .l-header.state_sticky {
}
.l-canvas.type_wide .l-subheader, .l-canvas.type_boxed .l-submain {
min-height: 100px !important;
padding top: 25px;
}
Any problems let me know.

Why is my background color not being applied? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I'm trying to work out why my background-color isn't showing up. I'm guessing it has something to do with the float, but am not exactly sure why or what is causing it.
http://jsfiddle.net/K4Sw9/
You need to add
<div style="clear:both;"></div>
before closing #header-social.
#header-social-inner:after {
display:block;
clear:both;
content:'';
}
You can add a pseduo element with clear both so you don't have to change your markup.
http://jsfiddle.net/8Nz3z/
Actually, I like this better:
#header-social:last-child:after {
display:block;
clear:both;
content:'';
}
http://jsfiddle.net/8Nz3z/1/
just give a height. like this:
#header-social {
background-color: #111;
height: 125px;
}

Resources