I have a layout whitch is something like:
<div id="content">
<div class="container">
<div id="container-overlay"></div>
<img>
</div>
<div class="container">
<div id="container-overlay"></div>
<img>
</div>
</div>
I want all my images to be the same width and in a single column, so I used display block:
#content{
position: relative;
}
.container{
display: block;
}
.container-overlay{
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}
img{
width: 600px;
}
However images are displayed side by side and not in a single column, and I'm not sure why!!
You can check the real problem here: http://layouttotest.tumblr.com/
You just need to remove the position absolute on the .container, like to be seen in this fiddle http://jsfiddle.net/w89qytrs/.
position: absolute aligns the element from the top left corner of the next parent element which is position: relative.
Related
Can I somehow make the absolute element stay at the same position all the time even when the parent(relative) image is adjusting its size to screen? At the moment I am using px to use position of elements, its fine on huge screen, but whenever the image gets smaller the absolute elements wont stick to the same position. Also I tried using <img></img> and put elements inside it and make the img as relative, but I think these tags dont work.
.img {
width: 100%;
height: auto;
}
.container {
position: relative;
}
.container > p {
position: absolute;
left: 300px;
bottom: 200px;
}
<div class="container">
<img src="https://pngimg.com/uploads/surfing/surfing_PNG9721.png" class="img">
<p>Im absolute
</p>
</div>
use percentage and for font-size use clamp()
.img {
width: 100%;
height: auto;
}
.container {
position: relative;
}
.container > p {
position: absolute;
left: 22%;
bottom: 48%;
color : white;
font-size: clamp(5px,2vw,3rem);
}
<div class="container">
<img src="https://pngimg.com/uploads/surfing/surfing_PNG9721.png" class="img">
<p>Im absolute
</p>
</div>
Try removing the "position: relative;" of the container. Your p tag is absolute respect the container because of that. Removing relative in container, the absolute is refered to the document.
.img {
width: 100%;
height: auto;
}
.container > p {
position: absolute;
left: 300px;
bottom: 200px;
}
<div class="container">
<img src="https://pngimg.com/uploads/surfing/surfing_PNG9721.png" class="img">
<p>Im absolute
</p>
</div>
I currently have:
<div className='header'></div>
<div className='hero-img'></div>
<div className='paragraph'></div>
<div className='cta'></div>
I want to overlay header onto hero image. Here is my CSS:
.hero-image {
height: 60vh;
min-height: 10em;
width: 100vw;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
background-size: cover;
background-position: center;
position: absolute;
top: 0;
}
So now the header is properly overlayed over the hero image, but now the paragraph has moved up and is also over the hero image. How do I move paragraph (and all subsequent divs) down, now that I've done position:absolute on the hero image and anchored it to the top?
Use position: absolute; on .header not in .hero-img and it will work fine.
Instead of making image position absolute make header's position absolute.
Learn positions before applying else you will do random things and get random results.
.image{
display: block;
width: 200px;
height: 200px;
background-color:red;
}
h2{
position: absolute;
}
<div>
<h2>Good
</h2>
<div class='image'></div>
</div>
<p>Para1 Para1 Para1 Para1 Para1 Para1 Para1 Para1</p>
Here only header will be removed from normal layouting and will be position on parent divs top left. Everything else will remain as usual flow.
In absolute position just imagine content if header is absent and then position header at top-left of its parent.
You can use HTML5 document section elements to your advantage here.
(And you really should be using <header> instead of <div class="header">...)
<header>
</header>
<main>
<div className='paragraph'></div>
<div className='cta'></div>
</main>
not forgetting to give <header> a background image:
header {
background-image: url(/hero-img.jpg);
}
If the <header> is 140px tall, you can give it absolute positioning:
header {
position: absolute;
top: 0;
left: 0;
}
and you can give <main> a margin-top:
main {
margin-top: 160px;
}
The question is: is it possible? I have a div with relative position. Inside this div, I have another div with position: absolute and top: whatever.
This absolute positioned div overlaps content in parent div without any problems, but another relative position div (outside parent) doesn't even care. Before this question I googled as I much as I could, so I'm for 90% sure that it's impossible, or I'm on a wrong way, but I need to be sure.
Here is an example http://jsfiddle.net/MNLbZ/2/
HTML
<div class="main">
<div class="content">11112222233</div>
<div class="abs"></div>
</div>
<div class="main"></div>
CSS
.main {
background: green;
position: relative;
height: 100px;
width: 100px;
z-index: 100;
}
.content {
position: relative;
z-index: 500;
width: 100px;
}
.abs {
position: absolute;
width: 50px;
height: 300px;
top:0;
right: 0;
background: red;
z-index: 999;
opacity: .5;
}
The z-index of the second .main div must be lower than that of the first div that contains the absolute div:
add a class to the second main
<div class="main">
<div class="content">11112222233</div>
<div class="abs"></div>
</div>
<div class="main second"></div>
then use this style:
.second {z-index:99;}
Example
I have two div elements inside one div element. These two div elements are both 50% wide and other one is floated to left and the other is floated to right. The right floated div contains one high picture (in different heights) and left floated div contains text. On the left div these texts are separated into three different sized rows and the whole left div should be as high as the right div. How am I able to do this using only CSS? Here's my example code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
margin: 0;
}
.container {
width: 100%;
height: 100%;
overflow: auto;
background: #FF0;
}
.left {
float: left;
width: 50%;
background: #F0F;
}
.left .first {
height: 20%;
}
.left .second {
height: 50%;
}
.left .third {
height: 30%;
}
.right {
float: right;
width: 50%;
}
.right img {
display: block;
max-width: 100%;
}
p {
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<div class="first">
<p>First</p>
</div>
<div class="second">
<p>Second</p>
</div>
<div class="third">
<p>Third</p>
</div>
</div>
<div class="right">
<img src="http://upload.wikimedia.org/wikipedia/commons/3/3a/Centara_Grand_Hotel.jpg" alt="" />
</div>
</div>
</body>
</html>
The short answer is that you can kind of do this, but I don't think it will behave the way you expect.
You would have to declare explicit heights for the two <div>'s -
.left, .right {
height: 100px /*or whatever height you want*/;
}
If this is a static page, and the image never changes, you can manually enter the pixel amount.
If the picture is going to change, and you don't know what the height is going to be, you cannot get the left div to match the height of the right div using plain CSS.
There are ways to fake it (see the faux columns technique), but you cannot programmatically get one div to change it's height to match another one.
There are ways to do this with JavaScript, but I'm not going to get into them because you asked about CSS (and I hate using JS to manipulate layout like that - it's very unreliable).
Also: if your containing div, .container, collapses, it's because you need to either float it, or apply a clearfix technique.
There are a few things you need to do:
You need to float the containers.
You need to add an extra container and nest the divs in the following order:
<div class="container2">
<div class="container">
<div class="left">
<div class="first">
<p>First</p>
</div>
<div class="second">
<p>Second</p>
</div>
<div class="third">
<p>Third</p>
</div>
</div>
<div class="right">
<img src="http://upload.wikimedia.org/wikipedia/commons/3/3a/Centara_Grand_Hotel.jpg" alt="" />
</div>
</div>
</div>
Then you need to relative position your containers and move them to the right. After that, you'll move your content divs from the left.
For your CSS:
.container {
width: 100%;
float: left;
position: relative;
right: 50%;
}
.container2 {
width: 100%;
float: left;
overflow:hidden;
position:relative;
}
.left {
float: left;
width: 50%;
left: 50%;
position: relative;
background: #F0F;
}
.right {
float: left;
width: 50%;
left: 50%;
position: relative;
}
Please see this page if you're having difficulties.
is there a way to absolute position an inner div to the top of the page ignoring parents relative position?
Nope, unless you re-locate it in the DOM.
(using position:fixed might be an alternative if you want it to be window related instead of document related)
You can use position: absolute; and negative values:
HTML:
<div id="parent">
<div id="child">
The child's content
</div>
</div>
CSS:
#parent
{
position: relative;
top: 200px;
border: 1px dashed #f00;
height: 50px;
width: 200px;
}
#child
{
position: absolute;
top: -200px;
}
This should do it. Example for you here.