I have a full-width cover image. Inside of that, I have a bootstrap container class with an absolute positioned image that sits on top of the cover image. What I would like to to do is have that image positioned to the right-hand side of the container only.
Here is my code:
<div id="header">
<div class="container">
<img src="header-icon.png" class="header-icon" />
</div>
</div>
#header {
background-image: url('cover.jpg');
background-size: cover;
height: 300px;
position: relative;
.header-icon {
position: absolute;
bottom: 0;
}
}
Of course, when I add right: 0 to the header-icon, it aligns outside the container. I could, of course, create media queries and try and position the icon based on screen size, but I'm wondering if a better way to do it exists.
I have also tried to make the icon relative to the container, but this seems to break what I am trying to achieve.
I'm not 100% sure what you are trying to achieve, but it sounds like you want right: 0 to align the image to the right of the container and not the header.
position: absolute will position an element absolutely according to the first parent element that is not positioned statically. Right now, you have #header with relative position, but .container still has static position. Therefore, you want to apply position: relative to the container:
#header .container {
position: relative;
}
Also, the code you posted seems to be missing a </div>.
Is this what you are looking for jsfiddle, this is the code i added
#header .container {
position: relative;
height: 400px;
}
Related
So, from some time I'm trying to do this with Bootstrap, but I can't find a working way.Maybe it's something even more simple than the things i'm trying, i don't know anymore.
https://imgur.com/uZkCChn
Please for some suggestions.Thank you.
Here are the basics of absolute positioning inside relative containers:
Relative positioned containers are relative to other elements on the page.
A relative containers margin will always go from the last element on your page, not your page as a whole.
See https://jsfiddle.net/kknfLfh5/ for an example of relative positioned elements.
div2 has a
top: 0;
property, but it's not on the upper page border rather than at the lower border of div1.
If we changed the positioning of div2 to absolute, it will look like this.
We now have an absolute positioned div that ignores it's siblings and positiones itself on page level.
With your image, you want a similiar approach. Try wrapping your image inside a wrapper div that has relative positioning. Your text should have absolute positioning like this:
Css:
.wrapper{
position: relative;
display: inline-block;
}
img{
position: relative;
height: 100%;
width: 100%;
}
h1{
position: absolute;
left: 0;
top: 0;
}
p{
position: absolute;
right: 0;
top: 10px;
}
and your html:
<div class="wrapper">
<img src="http://via.placeholder.com/350x150" />
<h1>
I am a header.
</h1>
<p>
I am text.
</p>
</div>
Check this fiddle for a working sample: https://jsfiddle.net/4osq7tqo/
I would like to place a smaller image with a transparent background in front of a header image in WordPress. The theme I am currently using allows me to set own css styles but I have no clue how to achieve my goal.
Has anybody already worked on this?
Thanks a ton,
Anton
Here is an example how to place an image in front of another image. I placed a PNG of a bee inside a banner image.
HTML
<div id="container">
<img id="banner" src="https://www.mortcap.com/images/sample_report_banner.png">
<img id="bee" src="https://orig00.deviantart.net/672c/f/2014/320/3/1/bee_png_stock_by_karahrobinson_art-d86m7bq.png">
</div>
CSS
#container {
position: relative;
}
#banner {
width: 600px;
}
#bee {
position: absolute;
z-index: 5;
top: 20px;
left: 20px;
width: 100px;
}
When we set position: absolute, that element will always be position relative to the nearest parent with position: relative (or absolute). And then you can refine the position of the absolutely positioned element using top, bottom, left, right css properties.
Play arround with this fiddle
I have a little problem i was hopeing you guys could help with. I have create an empty white box on my frontimage. To do that i have to change the image to absolute. After this, the image is now out of alignment. To make it easier to understand, there are two images i want to show you, so you can see the problem.
Image when it is set to Relative:
Its the water image in top.. here you see that it is perfect align (left and right side) with the aque color boxes under.
Image when it is set to Absolute:
Somehow when i set the image to absolute, it gets bigger in the right side. I have read some earlier post that the parant should be set to relative.. I mean that I already have done that.
Code:
<div class="row">
<div class="col-sm-12 contentpage">
<img id="frontimage" src="~/images/index.jpg" />
<div class="col-lg-4">
<div class="bookingbox">
</div>
</div>
</div>
</div>
Css:
#frontimage{
z-index: 1;
position: absolute;
}
.contentpage {
height: 650px;
background-color: white;
position: absolute;
}
.bookingbox {
background-color: green;
position: absolute;
height: 450px;
width: 300px;
z-index: 2;
position: absolute;
top: 30px;
left: 30px;
}
img {
max-width: 100%;
}
Now it works.. take a look at the picture :D
Of course it's out of alignment!
When you set the image to absolute, it breaks off the flow of the page, and basically creates a new "layer" to be on. You can say it's "absolutely" off the page flow.
When you set the image to absolute, to position it correctly, make the parent of the image relative, then position and resize the image according to the origin of the parent.
Make sure to add another div so it fits inside it! winks
just got a question regarding relative & absolute positioning and applying clearfix to the main container cos I've written the code and it's not behaving as I expected.
Structure-wise this is a simple page about product history. nav-bar with drop-down menu at the top across the screen, then a big hero image across the screen, followed by a few paragraphs and a simple footer, that's it.
here's my problem:
I need to put 3 components in the hero image area - the hero image itself, one title word on the top left corner and one logo on the top right corner. What I've done is: I created a div and used the hero image as background image. I set the position value of the div to relative. I created another div to hold the title word and set the position to absolute, using top and left to give it a location. Following the same logic, I created another div to hold the logo and set it to float right, with position set to absolute and top and right to give a location. I've applied clearfix to the main div and everything looks ok on my screen (resolution 1280 x 1024) until I saw it on the wide screen(1680 x 1050) --- the logo is not on the hero image! It's to the right side of the hero image.
What caused this? I thought by putting 2 divs inside the main div and applying clearfix, the three will "get together" and act as one and won't separate... Is it because I haven't written any code for responsive layout? Or was it because I shouldn't have used the hero image as the background? Would this problem be solved if I used z-index instead to specify the stack order of hero image, logo and title word?
Below is my code and any help would be much appreciated!
<div id="history-content" class="clearfix">
<div id="history-image-text">HISTORY</div>
<div id="stamp">
<img src="./images/logo.png">
</div>
</div>
#history-content {
background-image: url('./images/heroimage.jpg');
min-height: 307px;
background-repeat: no-repeat;
position: relative;
}
#history-image-text {
color: #fff;
position: absolute;
top: 20px;
left: 50px;
font-size: 20px;
font-weight: bold;
}
#stamp img {
width: 10%; /*not sure I'm doing the right thing here either*/
height: 40%; /*not sure I'm doing the right thing here either*/
float: right;
position: absolute;
right: 100px;
top: 20px;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
height: 0;
line-height: 0;
}
Few things:
Absolutely positioned elements are taken out of normal flow, hence doesn't affect the size of their parent.
Since they're out of normal flow, float has no effect on them (as far as i know)
Absolutely positioned elements shrink wraps to fit it's contents unless width and height is set explicitly or stretched using the top, right, bottom & left properties.
Now your parent div #history-content doesn't have any height set, and all of it's content of are absolutely positioned, So it's not visible (height 0)
applying a proper height for the parent seems to fix the issues for me.
Side note: unlike what you think, you don't have two absolutely positioned<div>'s, #stamp img absolutely positions the <img> inside div#stamp, for the same reason mentioned above, div#stamp is also invisible (height 0) you'll get the same result with and without it. And without floats
As others have said, float doesn't have an effect on absolute positioned elements, and so technically you don't need clearfix in this case.
I'm not exactly sure why your logo is positioned outside the outermost container #history-content, but you could try to put a border around the #history-content to further troubleshoot.
EDIT: Maybe check your hero image dimension, is it smaller than 1608px in width?
<div id="history-content">
<div id="history-image-text">HISTORY</div>
<div id="stamp">
<img src="./images/logo.png">
</div>
</div>
I've changed your CSS below
#history-content {
background-image: url('./images/heroimage.jpg');
min-height: 307px; /*set whatever minimum height you wish*/
background-repeat: no-repeat;
position: relative;
}
#history-image-text {
color: #fff;
position: absolute;
top: 20px;
left: 50px;
font-size: 20px;
font-weight: bold;
}
#stamp {
display: block;
position: absolute;
right: 100px;
top: 20px;
width: 10%; /*set width of image in containter instead*/
height: auto;
}
#stamp img {
max-width: 100%; /*image width will not stretch beyond 100% of container*/
height: auto;
}
JSFiddle: http://jsfiddle.net/5L9WL/3/
I have a very teasing issue. I have a div positioned absolutely to a point. But when i resize the window, it is moved to other place and not pointed towards where i set it before. How can i resolve this problem?
Here is my HTML -
<div style="position:relative;">
<div id="intro_message">
content
</div>
</div>
And the CSS for "intro_message" div -
#intro_message
{
position: absolute;
left: 322px;
top: 0;
padding: 20px;
width: 505px;
}
You can clearly see even i used relative position to its parent it still doesn't work for me.
EDIT -
Here from 'clearly see..." means if i would have not tell that i used relative positioning then everyone here would suggest me to use it. Therefore i told you all in advance.
EDIT 2 -
#David - After reading you solution, i understood it, actually i had to do one little but crucial change in my css. Now, i have following css for my main container div -
margin: auto;
position: relative;
width: 505px;
and for the inner div #intro_message i have changed some values to position it fine -
#intro_message
{
position: absolute;
left: -137px;
top: -4px;
padding: 20px;
width: 505px;
}
Now it is placed nicely pointing towards a link where i wanted it to be. On resize it still well, but when i go on resizing it is moved again -
on full window by default -
on resize - issue arises again -
So how to solve it?
I assume that you do not actually want the div to be fixed to a coordinate point, because that is what absolute positioning relative to the window does: resizing the page will move everything but the div. So you must want it to be fixed relative to the document.
Though you mentioned you tried relative positioning and it didn't work for you, that is actually the answer to this problem. You used it incorrectly.
Let me explain:
Divs naturally fill the entire width of their parent containers, so placing your absolutely positioned element inside a plain div essentially did nothing. In order for it to matter, you need to have the parent container be in the right spot. I would assume that your parent container would probably be centered inside your page and be a fixed width.
To do this, you can create your div and assign a width and automatic margins to center it:
div[c]{
width: 400px;
margin: auto;
}
As you can see in the following fiddle, both the div positioned relative to the window and the div positioned relative to the yellow div end up in the same place because the div has the full width of the page, but the div positioned relative to the blue div is moved where it should be and will stay there if you resize the page.
JSFiddle
Just use this css:
<style type="text/css">
#intro_message
{
position: absolute;
left: 30%;
top: 0;
padding: 4%;
width: 505px;
}
</style>
In CSS
.contains{
position:relative;
margin:0 auto;
width:900px;//or whatever you want
}
Html:
<div class="contains">
<div id="intro_message">
you are not clearly define your problem so i assume that you have problem in left postion.
I think when you are resize the window inner div will be plot left will be change according to you.
There is no problem regarding to position but your logic was not cleared.
if you want left inner div perfectly than use "percentage" rather than "pixel"
example:
#intro_message
{
position: absolute;
left: 30%;
top: 0;
padding: 20px;
width: 505px;
}