Position relative element in front of absolute element CSS - html

I'm stuck in a problem, I want to show the relative element in front of absolute element, I know z-index don't work with relative elements. How can I show the image in front of the strip.
http://jsfiddle.net/Q9EEv/9/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Teset</title>
<style>
.container {
width: 1170px;margin:auto
}
.footer-elements{text-align:center;bottom:0;height:15em}
.footer-elements .content-b{text-align:center;position:relative;height:10em}
.footer-elements .content-b img.main-img{text-align:center;width:18em;margin-top:-3em}
.footer-elements .content-b .strip-m{background:#231F20;height:9em;}
.footer-elements .content-b .strip-border{width:100%;height:1.3em;position:absolute;top:0;left:0%;background-size:auto 100%;
background:url(http://i666.photobucket.com/albums/vv22/SincerelyBerry/HAIJYNX/backgrounds/stripes.png) repeat-x;}
</style>
</head>
<body>
<!-- container Start -->
<div class="container">
<br><br><br><br><br><br><br>
<div class="footer-elements">
<div class="content-b">
<div class="strip-m row">
<div class="strip-border"></div>
<img src="http://i252.photobucket.com/albums/hh15/liveyourlife815/stripes-1.png" class="main-img" alt="footer">
</div>
</div>
</div>
</div>
</body>
</html>
http://jsfiddle.net/Q9EEv/9/
Absolute element is strip so I want it on back on that relative image.
Thanks

Here you go: http://jsfiddle.net/Q9EEv/10/
.content-b img
{
position: relative;
}
You solved it your self. But z-index does work on every positioned element (not static).

Related

Resize logo image

So I have a probably really dumb question but I'm very new to coding.
I want to be able to resize and center my logo image (which is currently taking up the whole page on preview) but I've tried so many different ways of resizing in CSS and nothing at all happens. What am I missing??
Besides the standard beginning of HTML file this is all I have in my HTML file:
<div class="header">
<img class="logo" src="images/logo.png" alt="\Stuff logo">
</div>
These are the only lines I have in my CSS file:
body {
margin: 0 auto;
}
.logo {
max-width: 20%;
max-height: 20%;
}
img{
display:block;
margin:0 auto;
width:10%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="header">
<img src="https://images.unsplash.com/photo-1575881875475-31023242e3f9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" alt="">
</div>
</body>
</html>

Overlapping divs using bootstrap extend past page width, unsure what the cause is

I have some divs arranged in a way so that there are two columns, and a box that overlaps between them. For reasons I can't figure out, the div extends just slightly past the page width, causing a horizontal scroll bar to appear (which is bad).
Additionally, the left most div extends below the background image of the parent div, which should not be possible.
Why are these divs not lining up neatly?
My HTML code is below. I am not using a snippet as the snippet shows the output in responsive mode which does not demonstrate the issue. I know that inline CSS is advised against, and it is only used for the purpose of this question.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>Demo Page</title>
</head>
<body class="d-flex flex-column h-100">
<div style="height:500px;background-image:url(https://www.w3schools.com/howto/img_parallax.jpg);background-position:center;background-size:cover;">
<div class="row pb-3" style="height: 520px; position:relative;">
<div class="p-3" style="position:absolute; background:white; top:100px; height:220px; width:400px; z-index: 2;">
<h1>Text to overlap here</h1></div>
<div class="col-md-3" style="background:grey;"> </div>
<div class="col-md-9" > </div>
</div>
</div>
</body>
</html>
Just add to row with class pb-3
.pb-3{
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
You can also add to div with class p-3
.p-3{
max-width: 100%;
}
Avoid using "height" and use min-height /max-height instead.

Making an image fit to size of the html page using css

<!DOCTYPE html>
<html>
<head>
<title>TMNT - Rancid Tomatoes</title>
<link rel="stylesheet" href="movie.css">
<meta charset="utf-8" />
</head>
<body>
<div class="fit">
<img src="images/rancidbanner.png" alt="Rancid Tomatoes">
</div>
</body>
</html>
so far i have succeeded with
img{
width: 100%;
}
but i want to it make it so only this image fits and not the other ones.
i tried doing it with
img.fit
on my css file, but this just returns it back to normal.
.fit img{
width: 100%;
}
should do it for you. The div's class name is fit, not the image's. Therefore img.fit won't work.
If your image had the class .fit then you could just do
.fit {
width: 100%:
}
If you remove class="fit" from div and add it to img then the effect will be the same for this image as you had for all images before.
You can Go little easier!
Just add width="100%" in <img> tag.
<!DOCTYPE html>
<html>
<head>
<title>TMNT - Rancid Tomatoes</title>
<meta charset="utf-8" />
</head>
<body>
<div class="fit">
<img width="100%" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR8g4PCYI2ssAVPKlJmC9q4T_k84PE7zOHqAWultSDb-BbSy5YfK-5P0I1f" alt="Rancid Tomatoes" >
</div>
</body>
</html>

Element in iframe with height: 100% strech

I'm fighting with this problem:
I have iframe in which I'm showing website, which has some html structure. And inside this structure is element, which has css property: height: 100%;
Problem is, that element stretch to iframes full height, anyway it shouldn't I think. Could you give me some idea, how to solve this problem?
Here is source code for iframe content:
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://raw.githubusercontent.com/daneden/animate.css/master/animate.css" />
<link rel="stylesheet" href="https://www.zeerat.com/assets/front/styles/swiper.css" />
<link rel="stylesheet" href="https://www.zeerat.com/assets/front/styles/style.css" />
<link rel="stylesheet" href="https://www.zeerat.com/assets/front/styles/grid.css" />
</head>
<body>
<div id="overview">
<div class="overview slider swiper-container swiper-container-horizontal">
<div class="swiper-wrapper">
XXX
</div>
</div>
</div>
<div id="benefits">
<div class="grid">
<article id="article1" class="clearfix">
<div class="text col right">
<h2>People behavior in one picture</h2>
</div>
</article>
</div>
</div>
</body>
</html>
Here is source code, where I put an iframe:
<!DOCTYPE html>
<html lang="cs" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Titulek stránky</title>
</head>
<body>
<iframe src="iframe.html" width="1600" height="4000"></iframe>
</body>
</html>
Thank you very much for you help.
On the child page (the page inside the iframe) will be shown starting from the top left corner, so positioning the child page is usually not necessary. The styling of the iframe's dimensions on the parent page determines how much of the child page will be seen. The easiest and most effective way is to make the iframe responsive (able to adapt to changes of screen sizes and/or window)
<!DOCTYPE html>
<html lang="cs" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Titulek stránky</title>
</head>
<body>
<iframe src="iframe.html" width="100%" height="100%" style="position: absolute; top:0; left:0; right:0; bottom: 0; width: 100%; height: 100%;overflow: hidden; overflow-x: hidden; overflow-y: hidden;" allowfullscreen webkitallowfullscreen mozallowfullscreen ></iframe>
</body>
</html>

CSS background elements on both sides of the screen

I want to achieve this: two decoration elements (sort of waves) on both sides of the screen. Here's what I've got so far. If more elegant solution is possible (like styling with CSS only body element), then please advise.
Below solution would be fine, if both < img > elements would not be visible.
You can check this in action.
Here's the working FIDDLE.
Can you help?
<!doctype html>
<html class="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="styles/style.css" >
<style type="text/css">
.background_left {
background-image:url("http://www.destadesign.com/destacms/images/background_border_left.png");
background-repeat:repeat-y;
background-position:left;
position:absolute;
left:0;
}
.background_right {
background-image:url("http://www.destadesign.com/destacms/images/background_border_right.png");
background-repeat:repeat-y;
background-position:right;
position:absolute;
right:0;
}
.background_left, .background_right {
height:100%;
}
</style>
</head>
<body>
<div class="background_left">
<img src="http://www.destadesign.com/destacms/images/background_border_left.png">
</div>
<div class="background_right">
<img src="http://www.destadesign.com/destacms/images/background_border_right.png">
</div>
<div class="content" style="height:500px;"> <!-- content -->
</div>
</body>
</html>
Just do it like this:
body {
background:url("http://www.destadesign.com/destacms/images/background_border_left.png") left repeat-y,url("http://www.destadesign.com/destacms/images/background_border_right.png") right repeat-y;
}
This CSS adds two background images to body, positions them right or left respectively, and sets the repeat-y, so it doesn't fill the screen.
JSFiddle Demo