the Html is :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="wp-1-main.css">
<title></title>
</head>
<body>
<div class="wrapper">
<div class="textArea"></div>
</div>
<div class="imageLine">
</div>
</body>
</html>
and the CSS is
.wrapper{
width: 100%;
height: 400px;
position: fixed;
top: 50%;
margin-top: -200px;
border-top: solid 1px black;
border-bottom: solid 1px black;
background-color: pink;
}
.imageLine{
width: 500px;
height: 1500px;
float: right;
margin-right: 60px;
background-color: grey;
}
my goal is to make the .imageLine cover some .wrapper , and the wrapper is centered vertically , and always be in the viewport.
but those code turn out that the .wrapper covers the .imageLine . any idea to fix that?
You could use z-index
Higher z-indices will come infront of lower z-indices.
Related
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 9 months ago.
The community reviewed whether to reopen this question 9 months ago and left it closed:
Original close reason(s) were not resolved
I can draw such inner rectange inside fixed size rectange using absolute unit like in this code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test div dimension</title>
<style>
#main {
width: 640px;
height: 360px;
border: 1px solid black;
}
#content {
width: 100%;
}
#slide {
border: 1px solid red;
width: calc(640*0.75px);
height: calc(360*0.75px);
float: right;
}
#camera {
border: 1px solid red;
width: calc(640 * 0.25px);
height: calc(360 * 0.25px);
float: left;
}
</style>
</head>
<body>
<div id="main">
<div id="content">
<div id="slide">
Rectange 1
</div>
<div id="camera">
Rectange 2
</div>
</div>
</div>
</body>
</html>
How can I use percentage(%) based unit instead of px to create such inner rectangles to avoid calculation like calc(640*0.75px)?
I tried this but did not work
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test div dimension</title>
<style>
#main {
width: 640px;
height: 360px;
border: 1px solid black;
}
#content {
width: 100%;
}
#slide {
border: 1px solid red;
width: 75%;
height: 75%;
float: right;
}
#camera {
border: 1px solid red;
width: 25%;
height: 25%;
float: left;
}
</style>
</head>
<body>
<div id="main">
<div id="content">
<div id="slide">
Rectange 1
</div>
<div id="camera">
Rectange 2
</div>
</div>
</div>
</body>
</html>
You can set the slide and camera's width and height in percentages but that percentage will be of the parent which is the content div. But the content width has a height of 0 because you haven't set it. So change content's style to this:
#content {
width: 100%;
height: 100%;
}
and add percentages to camera and slide like this:
#slide {
border: 1px solid red;
width: 75%;
height: 75%;
float: right;
}
#camera {
border: 1px solid red;
width: 25%;
height: 25%;
float: left;
}
Set the topmost div height in terms of viewport height like this: 100vh, and then make the inner div's take height in %. The snippet is given below
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test div dimension</title>
<style>
#main {
width: 640px;
height: 100vh;
border: 1px solid black;
}
#content {
width: 100%;
height: 100%;
}
#slide {
border: 1px solid red;
width: 50% !important;
height: 50%;
float: right;
}
#camera {
border: 1px solid red;
width: 50% !important;
height: 50%;
float: left;
}
</style>
</head>
<body>
<div id="main">
<div id="content">
<div id="slide">
Rectange 1
</div>
<div id="camera">
Rectange 2
</div>
</div>
</div>
</body>
</html>
This question already has answers here:
Why does z-index not work?
(10 answers)
Closed 2 years ago.
I was wondering how i can achieve the following:
I have two divs. One is positioned absolutely, while the other is a simple block element. I need the block element to actually overlap the absolutely positioned container.
Here's a picture of what i need to do:
The red box is positioned absolutely, the blue box is a normal block element (inside a flexbox, but i don't think that changes anything, correct me if im wrong)
I've tried achieving this with z-index, but it doesn't seem to work.
Thanks
Edit: Here's a fiddle to show more or less my code.
https://jsfiddle.net/xzp284vn/
<div class="container">
<div class="block">
</div>
<div class="absolute">
</div>
</div>
.container {
display: flex;
justify-content: flex-end;
position: relative;
width: 400px;
height: 300px;
}
.block {
border: 1px solid blue;
width: 40px;
height: 300px;
}
.absolute {
border: 1px solid red;
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 40px;
background: yellow;
}
.red{
height:100px;
border: 1px solid red;
}
.blue{
border: 1px solid blue;
width: 150px;
position: absolute;
right:30px;
top:9px;
height:300px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="red">
</div>
<div class="blue">
</div>
</body>
</html>
This is what you are looking for..
I want a very thin horizontal line. (The result of the code below is exactly what I want)
The problem is If I want to set the position to absolute the line disappears?!
What I'm missing?
I've tried to change the position using margins but still...
.nav-bar {
/*position: absolute;*/
border-bottom: 1px solid rgba(204,193,218,1);
margin-top: 60vh;
margin-left: 10vw;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="nav-bar">
</body>
</html>
You're missing width: 100%;. div elements have this by default if they are normally positioned, but it needs to be manually set the you are using relative positioning.
At the moment, your line is being displayed with a width of 0, which is why you can't see it.
Also note: your div was missing a closing tag, I have fixed that in the code snippet below.
.nav-bar {
width: 100%;
position: absolute;
border-bottom: 1px solid rgba(204, 193, 218, 1);
margin-top: 60vh;
margin-left: 10vw;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="nav-bar">
</div>
</body>
</html>
Unless you specify either width or left/right positioning the element will be rendered with a width of 0. So you need to either write this
.nav-bar {
position: absolute;
left:0px;
right: 0px;
border-bottom: 1px solid rgba(204,193,218,1);
margin-top: 60vh;
margin-left: 10vw;
}
Or this
.nav-bar {
position: absolute;
width: 100%;
border-bottom: 1px solid rgba(204,193,218,1);
margin-top: 60vh;
margin-left: 10vw;
}
.nav-bar {
position: absolute;
/*left:0px;
right: 0px;*/
border-bottom: 1px solid rgba(204,193,218,1);
margin-top: 60vh;
margin-left: 10vw;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="nav-bar"/>
</body>
</html>
When you use position: absolute, you need to explicitly specify the element's width and height. And on a side note, your div does not have a closing tag.
.nav-bar {
position: absolute;
border-bottom: 1px solid rgba(204,193,218,1);
margin-top: 60vh;
margin-left: 10vw;
width:100%;
height:50px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="nav-bar"> </div>
</body>
</html>
When opening this up in a browser, the combined width of the two divs does not fully fulfill the width of the body. I have made the background color of the second (right) div black so you can see the white space between the second div and the right side of the page. I tried messing with the border, margin but maybe I did it wrong.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Example</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="home2.css">
</head>
<body>
<div id="wrapper">
<main>
<div id="div1">
<img src="font-header.png" alt="Image Logo Header">
</div>
<div id="div2">
</div>
</main>
</div>
</body>
</html>
CSS:
img {
border-bottom: 4px solid black;
position: relative;
left: 30px;
}
body {
margin: 0;
}
#div1 {
height: 756px;
width: 300px;
border: 2px solid black;
float: left;
}
#div2 {
height: 758px;
width: 1216px;
overflow: hidden;
background-color: black;
}
Position the divs absolutely and apply media queries so they will be responsive. Hope this helps.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Example</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="home2.css">
<style>
img {
border-bottom: 4px solid black;
position: relative;
left: 30px;
}
body {
margin: 0;
width: 100%;
}
#div1 {
height: 756px;
width: 25%; //change width to fit your need
border: 2px solid black;
float: left;
left:0;
position: absolute;
}
#div1 img{
left: 0;
}
#div2 {
height: 758px;
width: 75%; //change width to fit your need
overflow: hidden;
background-color: blue;
right:0;
position: absolute;
}
</style>
</head>
<body>
<div id="wrapper">
<main>
<div id="div1">
<img src="font-header.png" alt="Image Logo Header">
</div>
<div id="div2">
</div>
</main>
</div>
</body>
</html>
Since you are using fixed width, it will not adjust properly to your screen. And in different resolutions it will not adjust correctly to your screen size. Instead use % width.
#div1 {
height: 756px;
width: 35%;
float: left;
}
#div2 {
height: 758px;
width: 65%;
overflow: hidden;
background-color: black;
}
I've setup this fiddle with your example: https://jsfiddle.net/5yfnLcdt/
So without using Flex, how can I make this text container fill the gap of the parent, when another div (fixed image) it's already inside? Thanks in advance.
Here's the code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Testing</title>
<style>
#container { width: 50%; height: 100px; margin: 0 auto; border: solid 1px #fb9494;}
.image { height: 100px; width: 100px; background-color: #d9d9d9; float: left;}
.text { width: 100%; background-color: yellow; float: left;}
</style>
</head>
<body>
<div id="container">
<div class="image">image</div>
<div class="text">text</div>
</div>
</body>
</html>
Try adding this to the text class:
.text {
width: calc(100% - 100px);
height: 100px;
}
DEMO: http://jsfiddle.net/abbts5n3/