I am trying to position this sale banner over the image. The red border is a fixed width div that is as wide as I need for the page layout. No matter what the size of the image is, I need to keep a space as wide as this.
The black border is a div that is only as wide as the picture, which I am trying to display the sale banner in the upper right corner on top of the picture.
EXAMPLE: http://jsfiddle.net/d5nxT/
I know I'm getting something messed up with the displays & positions. I just need the image & sale span to have the same settings, except the sale span floats to the right and has a higher z-index than the image.
See the fiddle and demo:
fiddle: http://jsfiddle.net/d5nxT/2/
Demo: http://jsfiddle.net/d5nxT/2/embedded/result/
float:right, z-index, position:relative, display:inline-block all are not required.
You need to position:absolute the sale span like this fiddle
You should change the css of the sale span to the following:
span.onsale {
display: inline-block;
width: 59px;
height: 59px;
z-index: 10;
background: url(http://i42.tinypic.com/sq49ow.png) no-repeat;
position:absolute;
top:0;
right:0;
}
This way the sale image is place in the top right corner of the parent image (hence the top:0 and right:0 styles)
There are 2 things that need to be done to do this kind of placements flawlessly.
You need a positioned (not fixed) element as a parent.
Your child needs to become absolute.
If you ensure these 2 things you will be able to position child elements relative to the parent with the top, left, bottom and right properties in css.
For you that probably means div.interior-images needs to get the property position: relative. And span.onsale gets the properties position: absolute and right: 0.
Your altered jsfiddle can be found here
Related
Here is a jsfiddle:
https://jsfiddle.net/mcgfhL10/
#description{ /*Just a breif description of the product. */
font-family:"microsoft sans serif";
font-size:22px;
position:relative;
overflow-y:scroll;
bottom:40px;
width:400px;
height:150px;
background:black;
}
I would like the div with id description to fall to the bottom of the div with id shelf. However, it falls to the bottom of the image, which is a sibbling? how is this working?
The problem with your code is that your description is positioned relatively and your parent has no positioning set at all. This means that the description basically doesn't know that it lives inside the shelf and is instead calculating its position relative to the image, which is the closest element. (If you set the bottom: 40px to 0px in description, you will notice that it will sit snugly under the image).
You have to make the child absolute and the parent relative. If you position a child element relative and then set the child bottom to 0px, it won't stick either. You're basically telling it to not move anywhere. (Relative means relative to its current center).
Here is a demo for reference: jsFiddle Demo
.shelf {
position: relative;
}
.description {
position: absolute;
}
I strongly suggest you read up on CSS positioning and display before you go any further. It will help you a lot if you know the foundations well.
CSS Tricks
A List Apart
Your description needs to be positioned absolute, because it is not relative to the other elements, but absolute within the parent container. You also need to move your description div on top of the image.
So your HTML becomes:
<div id="description"><p>foobar</p></div>
<img id="image" src = "image.jpg">
and your CSS addition is:
#description{
position: absolute;
}
Here's a fiddle: https://jsfiddle.net/jgghpcmy/1/
I have included a link to a picture to help explain my question: http://i.gyazo.com/b1e319cda4b7c21a5072156f5bd7c590.png
Im trying to position the red div exactly below the blue one. The problem is that the top container which you can see at the top of the picture, has a height of 100%. The blue div then has a height of 300px and is positioned with top:100%.
How can I get the red div exactly under the blue one? I almost just need to be able to do: top: 100% + 300px;
Thanks!
Well you could do top: calc(100% + 300px); ?
Put both the red div and the blue div in a single div container.
Apply the absolute positioning to the outer container, and keep the inner divs static (as in, remove absolute positioning).
Remove margins between divs with margin: 0;
I want to fade out the top and bottom of two separate divs.
Right now I'm trying to use position:absolute and top:1px on the top one and bottom: 1px on the bottom one. Was not working for me, uses the parent div? Which was causing them to show up in the wrong places.
This fiddle shows where I am:
http://jsfiddle.net/mstefanko/23mfk/
What I want is for the top and bottom of each div to have the fade demonstrated in the fiddle.
Your .inner-1 and .inner-2 both have absolutely positioned elements within them. These elements are being positioned in relation to the viewport, and not their parent. You'll need to set .inner-1 and .inner-2 to a relative position:
.inner-1,
.inner-2 {
position: relative;
}
This will cause the gradient elements to appear at the top and bottom of these containers.
Demo: http://jsfiddle.net/23mfk/1/
please see my fiddle: http://jsfiddle.net/qVHg8/1/
Why isn't the fixedRightCol being positioned at right:0 of the outer container div? Right now it's going outside of the container div which I don't want.
I could use position absolute, which puts the fixedRightCol in the right position but scrolls. I want the fixedRightCol to be fixed (no scroll).
so how can I get fixedRightCol position correctly and fixed on scroll?
Thanks
If you want the green div to be fixed inside the red div, you need to use position: absolute;
http://jsfiddle.net/qVHg8/2/
position: fixed; fixes the element to the viewport, rather than the parent.
EDIT:
If you're able to use a bit of javascript & jQuery, then this will work with your dynamic margins:
$(function(){
$('.fixedRightCol').css({right: $('.container').offset().left});
});
What thats doing is setting the right CSS property to be the calculated left property of the container. As the margins are the same on both side (auto), then this will shit the red div to the correct position.
http://jsfiddle.net/qVHg8/4/ is a working example of this.
When you give something a position fixed, it breaks out of any divs it may be in.
Edit:
You could just do this:
.fixedRightCol{
position: fixed;
margin-left: 350px;
width: 50px;
background: green;
}
Use margin-left: 350px; for green box with NO right: 0px; or anything...
i think you are meaning to use position:absolute;
the div with the word test it in, just will not go up the top right..... despite me floating right and specifying top 0
http://www.e-fluential.com/offline/
HELP!!
Thanks in advance
You should give the element the following properties:
position: absolute;
top: 0;
right: 0;
This will make the element go to the top right corner. If you want the element to go to the top right corner of its parent you should give the parent the following property:
position: relative;
This will position the element relative to its parent.
Another solution would be to wrap the elements on the left with a wrapper, which you will then need to give a width and a float: left;, do the same with the elements that should go right but instead of floating it left give it a float: right;. The total width of both wrappers should not extend the width of the parent.
You'll probably want to go with the second solution because you don't need to give your elements absolute coordinates that way.
Positioning elements
Floating elements