I know this is asked a lot, and that z-index cannot work on items that aren't positioned. Yet, I'm clearly missing something here. The goal is to have my header cover most of the page initially, and on a click move up to reveal the body content.
body {
margin: 0;
overflow: hidden;
}
header {
text-align: center;
height: 95vh;
margin: 0;
position: relative;
z-index: 9999;
box-shadow: 0px 5px 10px;
padding-top: 10px;
}
.leaf {
height: 50px;
transform: rotate(135deg);
position: absolute;
bottom: 0;
margin: 0px 0px 20px -25px;
}
.categories {
width: 100%;
text-align: center;
position: absolute;
top: 12%;
z-index: 1;
}
.chars {
border: 1px solid black;
}
<header>
<h1>Title Placeholder</h1>
<svg class="leaf" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M219.388,46.202c-45.273,7.148-86.333,28.057-118.741,60.466l-7.059,7.059C52.895,154.42,30.486,208.523,30.486,266.07
c0,52.508,18.666,102.144,52.846,141.346L0,490.747L21.253,512l83.33-83.33c39.202,34.18,88.838,52.846,141.346,52.846
c57.548,0,111.65-22.41,152.343-63.102l7.059-7.059c32.409-32.408,53.318-73.469,60.466-118.741L512,0L219.388,46.202z
M436.11,287.924c-6.152,38.957-24.144,74.288-52.03,102.176l-7.059,7.059c-68.705,68.705-178.36,72.098-251.119,10.193
l239.44-239.439l-21.253-21.253L104.647,386.1c-61.904-72.759-58.512-182.414,10.194-251.119l7.059-7.059
c27.888-27.887,63.219-45.879,102.176-52.03l251.79-39.756L436.11,287.924z"/>
</g>
</g>
</svg>
</header>
<div class="categories">
<h2>Characteristics</h2>
<div class="chars leaves"></div>
<div class="chars fruit"></div>
<div class="chars flowers"></div>
<div class="chars twigs"></div>
<div class="chars other"></div>
</div>
IF I understand correctly what you want, there is no z-index issue. Everything is correctly positioned.
The only thing missing is that the header has a transparent background. Adding background-color: white; to the header block in the CSS makes it work.
Related
I want to add waves for one of the divs. I used some website that generated svg with neccessary code. The problem is it covers all the content of my div. What seems to be the problem here?
.Upper-half-wrapper {
background-color: #0A2640;
height: 515px;
position: relative;
}
.custom-shape-divider-top-1655888002 {
position: absolute;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
}
.custom-shape-divider-top-1655888002 svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 266px;
transform: rotateY(180deg);
}
.custom-shape-divider-top-1655888002 .shape-fill {
fill: #1B3B5D;
}
<div className="Upper-half-wrapper">
<div className="custom-shape-divider-top-1655888002">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path
d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z"
opacity=".25" className="shape-fill"></path>
<path
d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z"
opacity=".5" className="shape-fill"></path>
<path
d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z"
className="shape-fill"></path>
</svg>
</div>
<div className="Upper-half-content">
Some text
</div>
</div>
It looks like the answer was to use position: relative; on content i wanted to be on top.
I'm trying to use wave SVG and I have a background image at the body
but I want the SVG to be filled with transparent so it shows the body background-image
but when I try to make it fill: transparent or fill-opacity: 0
it just hides all the wave shapes. So is there is a way to replace #000000 with something transparent that shows body background-image?
Here is an example code
https://jsfiddle.net/nLt2vu4k/
* {
margin: 0;
padding: 0;
}
body {
background-image: url("https://wallpaperaccess.com/full/5131560.jpg");
}
header {
min-height: 20rem;
background-color: cyan;
position: relative;
}
.shape {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.shape svg {
position: relative;
display: block;
width: calc(128% + 1.3px);
height: 163px;
}
.shape .shape-fill {
fill: #000000;
}
<html>
<body>
<header>
<div class="shape">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
</svg>
</div>
</header>
</body>
</html>
Thank you for helping,
Best regards.
For transparent you can define "fill-opacity" to 0 in path:
<html>
<body>
<header>
<div class="shape">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill" fill-opacity="0"></path>
</svg>
</div>
</header>
</body>
</html>
You can use clipPath with your svg
To have a nice result you might have to edit your SVG
* {
margin: 0;
padding: 0;
}
body {
background-image: url("https://wallpaperaccess.com/full/5131560.jpg");
}
header {
min-height: 20rem;
background-color: cyan;
position: relative;
clip-path: url(#myClip);
}
.shape {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.shape svg {
position: relative;
display: block;
width: calc(128% + 1.3px);
height: 163px;
}
.shape .shape-fill {
fill: #000000;
}
<html>
<body>
<header>
<div class="shape">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<clipPath id="myClip">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
</clipPath>
</svg>
</div>
</header>
</body>
</html>
Try creating a new svg to cover the header background, and remove the header background-color.
* {
margin: 0;
padding: 0;
}
body {
background-image: url("https://wallpaperaccess.com/full/5131560.jpg");
}
header {
min-height: 20rem;
position: relative;
}
.shape {
position: absolute;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
}
.shape svg {
position: relative;
display: block;
width: 100%;
height: auto;
}
<header>
<div class="shape">
<svg width="671" height="221" viewBox="0 0 671 221" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0H671V195C375 304 282 14 0 195V0Z" fill="#0ff"/>
</svg>
</div>
</header>
https://jsfiddle.net/afelixj/7z1L5xdo/3/
I have some trouble aligning an svg I am new to this thing. I want to see it as a whole and place it at the center of the main container. Need your help guys. Thanks in advance.
<div class="main-container">
<h1>Hi</h1>
<svg class="morph" viewBox="0 0 1119 619" preserveAspectRatio="none">
<path d="M735.75,229.593c61.129-5.951,122.258-90.759,179.219-89.271s127.815,53.562,166.715,72.9,140.318,49.1,148.654,130.931-16.672,141.346-13.893,187.469,11.114,196.4-186.165,193.42-220.9-122-327.873-89.271-104.2,111.588-308.423,89.271S136.965,405.159,184.2,356.06s33.343-117.54,112.533-119.028,138.929-37.2,205.615-38.684S674.622,235.544,735.75,229.593Z" fill="#EFE9F5" opacity="0.5"/>
</svg>
</div>
.css
.main-container {
position: relative;
padding: 0 0 0 20px;
float: right;
width: calc(100% - 240px);
}
svg.morph {
position: absolute;
margin: 0;
background-color: #00ff1f;
}
Please use the correct viewBox="168 140 1065 600" value.
.main-container {
position: relative;
padding: 0 0 0 20px;
float: right;
width: calc(100% - 240px);
height:100vh;
}
svg.morph {
position: absolute;
margin: 0;
max-width:100%;
background-color: #00ff1f;
}
<div class="main-container">
<h1>Hi</h1>
<svg class="morph" viewBox="168 140 1065 600" preserveAspectRatio="none">
<path d="M735.75,229.593c61.129-5.951,122.258-90.759,179.219-89.271s127.815,53.562,166.715,72.9,140.318,49.1,148.654,130.931-16.672,141.346-13.893,187.469,11.114,196.4-186.165,193.42-220.9-122-327.873-89.271-104.2,111.588-308.423,89.271S136.965,405.159,184.2,356.06s33.343-117.54,112.533-119.028,138.929-37.2,205.615-38.684S674.622,235.544,735.75,229.593Z" fill="#EFE9F5" opacity="0.5"/>
</svg>
</div>
Center with position absolute:
position absolute:
left:50%;
top:50%;
transform: translate(-50%, -50%);
.main-container {
position: relative;
padding: 0 0 0 20px;
float: right;
width: calc(100% - 240px);
border: 2px solid red; /*<<<<<<<<<<<<<<<<<<<<< Added to see container limit */
}
svg.morph {
position: absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
margin: 0;
background-color: #00ff1f;
}
<div class="main-container">
<h1>Hi</h1>
<svg class="morph" viewBox="0 0 1119 619" preserveAspectRatio="none">
<path d="M735.75,229.593c61.129-5.951,122.258-90.759,179.219-89.271s127.815,53.562,166.715,72.9,140.318,49.1,148.654,130.931-16.672,141.346-13.893,187.469,11.114,196.4-186.165,193.42-220.9-122-327.873-89.271-104.2,111.588-308.423,89.271S136.965,405.159,184.2,356.06s33.343-117.54,112.533-119.028,138.929-37.2,205.615-38.684S674.622,235.544,735.75,229.593Z" fill="#EFE9F5" opacity="0.5"/>
</svg>
</div>
I have an svg image and I am using flex to center the svg image inside div. svg image is getting properly centered in Chrome, but if I am trying to use the same behavior in IE 11, svg image is getting completely expanded and it covers the entire div.
jsbin link: https://jsbin.com/qufuqekera/1/edit?html,css,output
.svgImage {
width: auto;
display: flex;
align-items: center;
height: 100%;
padding-left: 10px;
padding-right: 10px;
}
svg {
-webkit-transform: scale(2);
transform: scale(2);
-webkit-transform-origin: left;
transform-origin: left;
position: absolute;
border: 1px solid red;
background-color: yellow;
}
.defaultSize {
position: relative;
width: 100%;
height: 100%;
box-sizing: border-box;
border: 1px solid black;
padding-top: 18px;
padding-bottom: 18px;
}
.scroll-bar {
overflow: auto;
position: absolute;
width: 100%;
}
.container {
height: 60vh;
position: relative
}
<div class="container">
<div class="defaultSize">
<div class="scroll-bar" style="height: calc(100% - 36px)">
<div class="svgImage">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1575.01 278.01">
<defs>
<style>.cls-1,.cls-3{fill:#009a38;stroke:#000;stroke-miterlimit:10;}.cls-1{stroke-width:1.01px;}.cls-2{font-size:7px;fill:#f2f2f2;font-family:SiemensSans-Roman, Siemens Sans;}.cls-3{stroke-width:0.99px;}.cls-4{fill:#c8c8c8;}</style>
</defs>
<title>SVG Image</title>
<g id="Layer_2" data-name="Layer 2">
<g id="svgImage" data-name="SVG Image">
<g id="Auto_SVGImage" data-name="Auto_SVGImage">
<g id="Right_Image" data-name="Right Image">
</g>
</g>
</g>
</g>
</svg>
</div>
</div>
</div>
</div>
Screenshot of output in Chrome displaying as expected: https://i.stack.imgur.com/COSm1.png
Screenshot of output in IE 11: https://i.stack.imgur.com/CWxo9.png
Hi i have a HTML polygon, this is my code :
<div class="full-background">
<div class="diag">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none">
<polygon points="100 0 100 10 0 10" />
</svg>
<img src="assets/img/downarrow.png" alt="" />
</div>
</div>
This produces :
I actually want this the other way around, so that the black section is blue and the blue section is transparent. I cant find a way at all to edit the color of the black section i have even tried changing the bodys bg-color.
Here is my css:
.diag {
position: absolute;
bottom:0;
width:100%;
}
svg {
display: block;
width: 100%;
height: 20vh;
background: #38aae1;
}
img {
height: 50px;
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
margin: auto;
background: #ef7d00;
border-radius: 50%;
padding: 10px;
}
Can anyone help? Thanks.
Add fill property to polygon and change the background of svg to transparent.
Have a look at the snippet below (use full screen for better view, ignore placeholder image of arrow):
.diag {
position: absolute;
bottom:0;
width:100%;
}
svg {
display: block;
width: 100%;
height: 20vh;
background: transparent;
}
svg polygon {
fill: #38aae1;
}
img {
height: 50px;
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
margin: auto;
background: #ef7d00;
border-radius: 50%;
padding: 10px;
}
<div class="full-background">
<div class="diag">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none">
<polygon points="100 0 100 10 0 10" />
</svg>
<img src="http://placehold.it/10x10" alt="" />
</div>
</div>
Hope this helps!
Set the polygon fill to the blue color and set the svg background to black in css:
svg{
background: black;
}
and your svg:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none">
<polygon points="100 0 100 10 0 10" fill="#38aae1"/>
</svg>