I need to position a text element at the bottom of a background-image.
<div style="background-image: url('http://www.hdwallpapersinn.com/wp-content/uploads/2013/03/1325120512b60-45927-1.jpg'); height:100px">
<p class="caption">Test</p>
</div>
.caption{
position: absolute;
bottom:0;
}
As you can see here: http://jsfiddle.net/K98CR/
This will position the element at the bottom of the page and not at the bottom of the background image. My understanding of the "bottom" property is that it can be relative to its parent element, but it is not working in this case.
Anything I am missing? Or any other way to accomplish this? Using a margin-top is not an option as I am creating a fluid layout and that would depend on screen ratio and I do not want that.
What I want is a way to position an element at the bottom of its parent element. In this case, I want to position text at the bottom of an image styled with "background-image".
Using postion: relative; to your background image div will fix it.
<div style="background-image: url('http://www.hdwallpapersinn.com/wp-content/uploads/2013/03/1325120512b60-45927-1.jpg'); height:100px; position: relative;">
<p class="caption">Test</p>
</div>
LIVE EXAMPLE
w3schools:
An absolute position element is positioned relative to the first
parent element that has a position other than static. If no such
element is found, the containing block is <html>
Related
I'm trying to position text to be centered, and at a certain distance from the top of the web page.
The problem occurring is that setting the position to absolute overrides the text-align: centered; command.
I also am not able to relocate the text upwards.
Why is this happening?
h1 {
position:absolute;
top:10px;
text-align:center;
font-family:impact;
font-size:80px;
}
Setting your h1 position to absolute makes the h1 element take it's parent's relative position. Text-align will set the text to the center of it's parents relative position. So they are contradicting each other and absolute positioning will always win.
It's a bad idea to have an h1 tag take an absolute position. I would instead create a parent div for the h1 element to take the absolute position. Check out this jsfiddle as an example. Also, play around with the various ways absolute positioning effects the different elements.
<div id="test">
<div id="abs">
<p class="text"> Hello </p>
</div>
</div>
https://jsfiddle.net/alexflores67/wb1dh7h9/2/#&togetherjs=C1mAFQldMN
Good luck!
I am trying to stretch the .black column's black background to the left side of the browser. I am not sure how to accomplish that WITHOUT setting the container to a fluid container.
Bootply example
Is there a way to do this? I am avoiding the fluid container, because the content has to be in a fixed-width one.
This can be achieved by adding an absolutely positioned div container with black background just after the container markup and making the container relative.
HTML
<div class="container relative">
<div class="col-md-3 black fill"></div>
CSS
.relative {
position: relative;
}
.fill {
position: absolute;
top:0;
left:-25%;
height:100%;
}
Here's a working example.
Explaination
Absolutely positioned elements basically float in the html document and position themselves as per the browser window depending on the top, left, right, bottom values.
However if the ancestor of an absolutely positioned element is relatively positioned, then the absolutely positioned elements place themselves relative to the parent container and thus the relative css class for the bootstrap container.
Since the width of absolutely positioned div is 25% as per the col-md-3 class and to compensate for the left margin of the bootstrap container, we use a negative left value of 25% for our absolutely positioned div.
A height of 100% is required to snap the black background container to the bootstrap container height.
The above CSS styling properties when combined properly can give the desired result.
Here is my code
CSS
h2
{
position: absolute;
left: 100px;
top: 150px;
}
h1
{
position: fixed;
top: 300px;
}
HTML
<h1>
Heading for Fixed Position
<h2>
This is a heading with an absolute position</h2>
</h1>
I'm new to CSS so was experimenting with positioning. I read some where
An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>:
If that is right then This is a heading with an absolute position message must be below the Heading for Fixed Position since h1 is the parent object and h2 being a absolute object must be positioned relative to h1. Please correct if I'm wrong.
Here is the JSFiddle link:
http://jsfiddle.net/KXmgG/
I would like to explain you how positioning actually works, there are 4 types
Static (Default)
Relative
Absolute
Fixed
Static position is nothing but a normal flow of the document where elements render on after the another (Excluding floats)
Relative position is something special, which turns out to be a great power when used with position absolute. When you want to use top, left, bottom and right instead of margins, you need to assign position: relative; to that element, after doing so, top, left, right and bottom properties will work.
When you use position: absolute; it gets out of the document flow, so if you have an element called div width class a. Now if you assign position: absolute; to class a, it will get out of the document flow, so when you use top: 0; it will fly away to the top of the document. So in order to restrict it, we wrap a container with position: relative; so that when you use position: absolute;, it will be absolute to that particular element and not the entire document.
Demo 1
Demo 2
Position fixed is entirely different, it is also out of the document flow as same as position: absolute; but the difference is that fixed positioned element cannnot be relative to any element, it has no contact whatsoever with any element, it is always calculated from the top, left, right and bottom of the window and not the element, also a fixed position element will flow as the user scrolls the document.
Demo
Coming to your answer, you are using fixed position and absolute position, both are out of the document flow, so they have no relation what so ever...
You are using top: 300px; for fixed position and top:: 150px; for absolute positioned element, so the fixed element will render below the absolute element, but when you try to scroll, your fixed element will scroll along where as position: absolute; element won't.
Edit as you commented
Go to w3c Validator and validate your document here
"An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is :"
Yes but you dont have position:relative declared.
If you want you're parent transform you're html by this :
<div class="parent">
<h1 class="child">blabla</h1>
<h2 class="child">blabla</h2>
</div> <!-- end parent -->
<div class="relative">
<h1>
Heading for Fixed Position</h1>
<h2>
This is a heading with an absolute position</h2>
</div>
CSS :
.relative{
position:relative;
}
JSFIDDLE with
position relative / fixed / absolute /]
http://jsfiddle.net/KXmgG/1/
The floating element has following structure:
<a>The_button</a>
<div style="position:absolute">
<div style="position:relative" class="inner-box">
Content
Content
Content
Content
Content
</div>
</div>
The content of multiple inner-box controls has variable length, so the inner-box'es have variable height. I want to define CSS class .inner-box (without JavaScript) so that the lower right corner of the inner-box will be positioned in relation to upper-left corner of the link. Is this possible?
Target browsers are IE8+, Firefox, Chrome, Opera, Safari.
Links have always the same height and width.
The only solutions I could come up with so far are:
http://jsfiddle.net/fmVz6/ - this requires a height and width to be defined on the "outer-box", not the inner-box (the inner must be absolutely positioned too).
Working on a second one at the moment ...
http://jsfiddle.net/fmVz6/1/ - this one does not require a height or width specified, it simply needs something inside the parent div (e.g. a space) to see the effect, otherwise the background doesn't appear.
Okay, to have it appear top-left of the link, http://jsfiddle.net/H5G8r/1/ (Requires some rearrangement of your HTML).
This one requires no width to be defined, and doesn't break the words onto multiple lines:
http://jsfiddle.net/H5G8r/2/
Take your pick :-)
You've got the right idea, but backwards. The parent element needs position: relative, and the inner element position: absolute, since the inner element is absolutely positioned relative to its parent (technically, its offsetParent. Specifying position: relative on the parent makes it the offsetParent of all of its child elements).
Next: to align the top-left corner of the parent element with the bottom-right corner of the absolutely positioned child, specify right: 100%; bottom: 100% in the child's CSS. This puts the child <100% of the parent's width> away from the right edge of the parent, and <100% of the parent's height> away from the bottom.
HTML
<div class=outer-box>
The Button
<div class=inner-box>
</div>
</div>
CSS
.outer-box {
position: relative;
}
.inner-box {
position: absolute;
/* align bottom-right with offsetParent's top-left */
bottom: 100%;
right: 100%;
width: 100px; /* fixed width, else contents will shrink */
}
Also in a jsFiddle: http://jsfiddle.net/ryanartecona/g344W/2/
When you get those aligned, you may want to put another box inside the .inner-box and make it position: relative to make any position adjustments, like sliding it a fixed distance over the button, etc.
For example: http://jsfiddle.net/MYvYy/182/
I have a lot of 'inner_box' elements inside of 'outer_box'. Inner_box elements a absolute.
I would like to adjust the outer_box height so that all inner_box elements fit in the outer_box.
I know it can be done with js. But I don't really like adjusting style with scripts.
So I was wondering if it is possible to be done using CSS?
I have some workaround for this problem, it may not fit your situation but consider looking at it.
First of all we need to duplicate all absolute positioned div which you want to make the parent extend to its height.
So your HTML will look like this.
<div class="outer_box">
<div class="inner_box">1</div>
<div class="inner_box ghost">1</div>
</div>
Then we need to add the "ghost div" CSS like so:
.inner_box.ghost{
visibility: hidden;
width: 100%;
top: 0;
left: 0;
position: relative;
}
It's not possible with CSS alone.
Layout flow:
An element with position:absolute is outside of the layout flow of the rest of the page. As far as the relative parent is concerned, the absolute child occupies no space in the layout.
This is very useful if you need to have a pop-up or a nav menu nested inside a container, because it won't affect the layout of the container. That's the sort of use case that position:absolute is well-suited for.
Fixed height:
If you need absolute content to behave as if it's a part of the layout flow, use fixed height. Give the relative parent and the absolute child a fixed height, and avoid placing any variable-height child elements before the absolute child. If variable-height content does precede it, use a relative placeholder div with a fixed height at the location where the absolute child needs to appear.
If position:absolute has to be used and fixed height is not an option, use JavaScript.
I only can provide you with Javscript fix for this using jQuery lib.
let me know if you use it or not,
$('.outer_box').height($('.inner_box').outerHeight());
This line will fix the outer_box height
I have tried the Fixed height method, but on small screens it is overlapping. So I have solved this problem by setting overlay background layer to seperate division and content to another division.
<div style="position:relative; background-color: blue; background-image:url('banner.png'); background-size:cover; background-position: center top;">
<div style="position:absolute; top:0; bottom:0; left:0; right:0; z-index:1; background-color:#00000099;"></div>
<div style="position:relative;z-index:2;"><h1 style="color:#fff;">Hello</h1></div>
</div>
I have uploaded the code on Codepen: https://codepen.io/shahbaz8x/pen/GRjEBze
I fixed it by changing the position property of div.inner_box into
position:relative
if this is not what you'r looking for, or this didn't fix it, then you will have to use Javascript.