*{
margin: 0;
padding: 0;
}
.container{
height: 638px;
width: 100%;
max-width: 100%;
position: absolute;
overflow: hidden;
background-position: center;
top: 0;
z-index: -1;
}
.container img{
width: 100%;
height: 638px;
}
.container #short-des{
background: rgba(0,0,0,.5);
height: 400px;
width: 500px;
position: relative;
}
<div class="container">
<img src="cover.jpg">
<div id="short-des">
</div>
</div>
i want short-des div to visible over image at the center i tried z-index but it not working. please help me out to fix this with reason so i will take these things in future
Put your div positioned absolute to overlap your image. Use left/top/right/bottom properties to set it's position.
It's position will be relative to closest non-static (absolute/relative/fixed) positioned element or <body>
#short-des,
#short-des2 {
position: absolute;
left: 90px;
top: 50px;
width: 50px;
height: 50px;
background-color: rgba(100, 250, 100, .6);
z-index: 7;
}
#short-des2 {
z-index: 8;
left: 100px;
top: 55px;
background-color: rgba(250, 100, 100, .7);
}
.wrapper {
margin: 50px;
position: relative;
}
<div class="wrapper">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
<div id="short-des"></div>
<div id="short-des2"></div>
</div>
You can add image as background of container div [.container] as
.container{
background: url('path/to/image'); // eg. 'cover.jpg'
background-repeat: no-repeat;
background-size: 100% 100%;
height: 638px;
width: 100%;
max-width: 100%;
position: absolute;
overflow: hidden;
background-position: center;
top: 0;
z-index: -1;
}
and remove the <img> from html
<div class="container">
<div id="short-des"></div>
</div>
Try this...
Just set position : absolute then set the location using top and left CSSproperties.
* {
margin: 0;
padding: 0;
}
.container {
height: 638px;
width: 100%;
max-width: 100%;
position: absolute;
overflow: hidden;
background-position: center;
top: 0;
z-index: -1;
}
.container img {
width: 100%;
height: 638px;
}
.container div#short-des {
background: rgba(0, 0, 0, .5);
height: 40px;
width: 50px;
top:40%;
left:50%;
position: absolute;
z-index:999;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="container">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
<div id="short-des">
</div>
</div>
</body>
</html>
.container{
height: 638px;
width: 100%;
max-width: 100%;
position: absolute;
overflow: hidden;
background-position: center;
top: 0;
z-index: -1;
}
.box {
position: relative;
width: 638px;
height: 300px;
}
.box img{
width: 100%;
height: 500px;
}
.box #short-des{
background: rgba(0,0,0,.5);
height: 400px;
width: 500px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -100px;
margin-left: -250px;
}
<div class="container">
<div class="box">
<div id="short-des">
</div>
<img src="http://www.slowtrav.com/blog/girasoli/IMG_6820.JPG">
<div id="short-des">
</div>
</div>
</div>
http://codepen.io/rizwanmughal/pen/KgZQRx
Related
I will show you a simple example related to my task.
.fixed1 {
position: fixed;
top: 0;
left: 100px;
width: 100px;
height: 100px;
background-color: yellow;
}
.fixed2 {
position: fixed;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: red;
}
.relative {
margin-top: 25px;
width: 50px;
height: 50px;
background-color: blue;
}
.absolute {
position: absolute;
left: -25px;
width: 50px;
height: 50px;
background-color: green;
}
<html>
<div class="fixed1">
<div class="relative">
<div class="absolute"></div>
</div>
</div>
<div class="fixed2">
fixed1
</div>
</html>
As you can see in the above example, there are 2 fixed divs and there is 1 relative div in the first fixed div.
And I am going to show 1 absolute div in the relative div. but it is hidden by the second fixed div.
How to show the whole absolute div without any hidden part.
Just replace your blocks in HTML.
.fixed1 {
position: fixed;
top: 0;
left: 100px;
width: 100px;
height: 100px;
background-color: yellow;
}
.fixed2 {
position: fixed;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: red;
}
.relative {
margin-top: 25px;
width: 50px;
height: 50px;
background-color: blue;
}
.absolute {
position: absolute;
left: -25px;
width: 50px;
height: 50px;
background-color: green;
z-index: 1000;
}
<html>
<div class="fixed2">
fixed1
</div>
<div class="fixed1">
<div class="relative">
<div class="absolute"></div>
</div>
</div>
</html>
There are multiple ways of doing this
Move div.fixed1 below div.fixed2
(or)
You can increase the z-index of div.fixed1
.fixed1 {
z-index: 1;
}
Use the property z-index, so you will specify that div.fixed1 is in front of div.fixed2:
.fixed1 {
position: fixed;
top: 0;
left: 100px;
width: 100px;
height: 100px;
background-color: yellow;
z-index: 1;
}
.fixed2 {
position: fixed;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: red;
}
.relative {
margin-top: 25px;
width: 50px;
height: 50px;
background-color: blue;
}
.absolute {
position: absolute;
left: -25px;
width: 50px;
height: 50px;
background-color: green;
}
<div class="fixed1">
<div class="relative">
<div class="absolute"></div>
</div>
</div>
<div class="fixed2">
fixed1
</div>
I have a assesment from my professor where i need to create a div square and overlay an image over it. i have tried to use Positioning, indexing and i tried to play with the margins but i couldnt figure out how to overlay my image over the div.
can someone help me please?
assignment from professor:
my code result:
my code:
body {
margin: 0;
}
body>* {
max-width: 250px;
max-height: 250px;
}
video {
max-height: 425px;
}
.square {
width: 75%;
width: 200px;
height: 200px;
background-color: blue;
border: 10px dashed rgb(10, 241, 164);
border-radius: 50px;
position: relative;
}
img {
width: 66%;
margin-right: -100%;
position: absolute;
z-index: 1;
opacity: 0, 5;
}
<div class="square"></div>
<img src="/images/100km.png" alt="100km bord">
The absolute positioned element needs to be inside the relative positioned element. Otherwise it'll be positioned in relation to root element.
In this case your image needs to be inside the <div>
body {
margin: 0;
}
body>* {
max-width: 250px;
max-height: 250px;
}
.square {
position: relative;
width: 75%;
width: 200px;
height: 200px;
background-color: blue;
border: 10px dashed rgb(10, 241, 164);
border-radius: 50px;
}
img {
width: 66%;
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
opacity: 0, 5;
border-radius: 50%;
}
<div class="square">
<img src="https://picsum.photos/200" alt="100km bord">
</div>
Here is the issue, you put absolute on the image, but the but the squire needs to be absolute and the image needs to be relative.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Assignment-E1</title>
<style>
body {
margin: 0;
}
body > * {
max-width: 250px;
max-height: 250px;
}
video {
max-height: 425px;
}
.square{
width: 200px;
height: 200px;
background-color: blue;
border: 10px dashed rgb(10, 241, 164);
border-radius: 50px;
position: absolute;
}
img{
width: 66%;
margin-right: -100%;
position: relative;
z-index: 1;
opacity: 0,5;
}
</style>
</head>
<body>
<div class="square"></div>
<img src="/images/100km.png" alt="100km bord">
</body>
</html>
This should do the trick. I created a main container to hold both the square and image and give it a class container. Then used different positions to set it match what you have
//HTML
<div class='container'>
<div class="square"></div>
<img src="/images/100km.png" alt="100km bord">
</div>
CSS
You should adjust the opacity between 0 and 1 . The image is in the bottom right corner to match what you want
.container{
position: relative;
}
.square{
width: 75%;
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-color: blue;
border: 10px dashed rgb(10, 241, 164);
border-radius: 50px;
position: relative;
}
img{
width: 66%;
margin-right: -100%;
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
opacity: 0.5;
}
This worked.
body {
margin: 0;
}
body>* {
max-width: 250px;
max-height: 250px;
}
.square {
position: relative;
width: 75%;
width: 200px;
height: 200px;
background-color: blue;
border: 10px dashed rgb(10, 241, 164);
border-radius: 50px;
}
img {
width: 66%;
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
opacity: 0, 5;
border-radius: 50%;
}
<div class="square">
<img src="https://picsum.photos/200" alt="100km bord">
</div>
I create a menubar and make it transparent and I add an image in my container div to look image behind menubar after this when I create another div it overlapping each other I want second div visible below container div
* {
margin: 0;
padding: 0;
}
.top_nav {
height: 80px;
width: 100%;
background: rgba(0, 0, 0, .5);
position: relative;
}
.container {
height: 638px;
width: 100%;
max-width: 100%;
position: absolute;
overflow: hidden;
background-position: center;
top: 0;
z-index: -1;
}
.container img {
width: 100%;
height: 638px;
}
.details {
height: 638px;
width: 100%;
position: absolute;
}
<header>
<div class="top_nav"></div>
</header>
<div class="container">
<img src="http://www.100resilientcities.org/page/-/100rc/img/blog/rsz_resilientcity_headphoto.jpg">
<div id="short-des"></div>
</div>
<div class="details"></div>
It's about CSS position property.
Solution
{
margin: 0;
padding: 0;
}
.top_nav {
height: 80px;
width: 100%;
background: rgba(0, 0, 0, .5);
position: absolute;
}
.container {
height: 638px;
width: 100%;
max-width: 100%;
overflow: hidden;
background-position: center;
top: 0;
z-index: -1;
}
.container img {
width: 100%;
height: 638px;
}
.details {
height: 638px;
width: 100%;
}
https://jsfiddle.net/ta1zveue/
Title explains what I want to achive, here is the code:-
HTML
<div id="header-shadow"></div>
<div id="block">
<div id="square"></div>
</div>
CSS
#header-shadow {
background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/header-shadow.png);
background-repeat: repeat-x;
display: block;
width: 100%;
height: 10px;
z-index: 0;
position: fixed;
top: 100px;
}
#block{
height:1000px;
}
#square{
height: 100px;
width: 100px; background: red;
margin-top: 200px;
display: block;
z-index: 9999999;
opacity: 1;
}
JSFiddle
As you can see, on scroll the #square sits under the background image, is there any way to display this over the #header-shadow?
Yes, like this, where you can remove your z-index and set position: relative to #block.
#header-shadow {
background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/header-shadow.png);
background-repeat: repeat-x;
display: block;
width: 100%;
height: 10px;
position: fixed;
top: 100px;
}
#block{
position: relative;
height:1000px;
}
#square{
height: 100px; width: 100px; background: red;
margin-top: 200px; display: block; opacity: 1;
}
<div id="header-shadow"></div>
<div id="block">
<div id="square"></div>
</div>
div #introbox is not centering. I have used container as relative and introbox as absolute. I have set top,bottom,left and right as 0. Still box is not centring. I want to centre the introbox in the intropic.
html,body{
padding: 0;
margin:0;
}
.container{
width: 960px;
margin:0 auto;
position: relative;
}
#header{
width: 100%;
height: 120px;
border-bottom: 1px solid black;
}
#nav{
height: 55px;
border-bottom: 4px solid lightblue ;
}
#intro-pic{
height: calc(100vh - 181px);
width: 100%;
background: url("img/introbg.jpg") center fixed;
}
#intro-box{
height: 55vh;
width: 800px;
background: rgba(0,0,0,0.74);
border-radius: 15px;
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left:0px;
}
<div id="header">
<div class="container">
Header
</div>
</div>
<div id="nav">
<div class="container">
Nav
</div>
</div>
<div id="intro-pic">
<div class="container">
<div id="intro-box">
sdfdsfds
</div>
</div>
</div>
Using transform:translate will work for any size div.
html,
body {
padding: 0;
margin: 0;
height:100%;
}
.container {
width: 960px;
margin: 0 auto;
position: relative;
height:100vh;
}
#intro-box {
height: 55vh;
width: 800px;
background: rgba(0, 0, 0, 0.74);
border-radius: 15px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
/* vertical centering */
}
<div id="intro-pic">
<div class="container">
<div id="intro-box">
sdfdsfds
</div>
</div>
</div>
Find the below code.
Make left position 50% and give margin-left half of the wrapper width value.
#intro-box{
height: 55vh;
width: 800px;
background: rgba(0,0,0,0.74);
border-radius: 15px;
position: absolute;
top: 0px;
bottom: 0px;
left:50%;
margin-left: -400px; /* Half of the wrapper width */
}
Try below example if you are trying exact center (from top & left)
#intro-box{
height: 55vh;
width: 800px;
background: rgba(0,0,0,0.74);
border-radius: 15px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -400px; /* Half of the wrapper width */
margin-top: -27.5vh; /* Half of the wrapper height*/
}
JSFIDDLE DEMO
#intro-box {
height: 55vh;
width: 800px;
background: rgba(0,0,0,0.74);
border-radius: 15px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -400px;
margin-top: -27.5vh;
}
But again, .container should have height over or equal to #intro-box
There are many ways to center Elements:
using line-height:
you want to center text and you know the size of the box:
.box { background: red; height: 200px; }
.box span { display:block; text-align: center; line-height: 200px; }
<div class="box">
<span>Text</span>
</div>
using transform:
you want to center anything but dont know the size of your box:
.box, .box2 { background: red; height: 200px; }
.box span { top: 50%; text-align: center; position: relative; display: block; transform: translateY(-50%) }
.box2 span { top: 50%; left: 50%; position: relative; display: inline-block; transform: translate(-50%, -50%) }
<div class="box">
<span>Text</span>
</div>
OR WITHOUT TEXT-ALIGN:
<div class="box2">
<span>Text</span>
</div>
using absolute position:
you know the height of the element you want to center
.box, .box2 { background: red; height: 200px; position: relative; width: 100%; }
.box span { position: absolute; background: green; height: 50px; width: 50px; top: 50%; left: 50%; margin: -25px 0 0 -25px; }
<div class="box">
<span></span>
</div>
There are even more ways to manage this.