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;
Related
I've looked at similar posts here, but can't seem to apply the concept correctly. I am wanting to append a small image to the bottom of a div to create a border effect on the div. I'm trying to use ::after, 'content' and relative positioning to the div, but it only get's me close. The div has a considerable amount of top/bottom padding. So when I try to add the image to the bottom of the div, it only adds it to the bottom of the div before the padding starts. I tried absolute positioning for the image and it ended up being at the bottom of the page and not the bottom of the div. Any ideas? Here is a reference for the page I'm working on. The image has been given a red background (halfway down the page for easy reference). http://www.staging.sarahandrachel.com/about/
Here is the markup for the div.
#block-4a4b3b44-9188-4b95-9678-d896851e0c54::after {
content: url('http://www.staging.sarahandrachel.com/wp-
content/uploads/2017/08/header-bottom-frame.png');
position: relative;
bottom: 0px !important;
left: calc(50% - 40px);
z-index: 9999;
background: red;
}
Any ideas?
containerdiv has two images, I make them display left and right:
.container {
background-image: url('img/left.png'),url('img/right.png');
background-position: left,130px;
overflow: visible;//this line doesn't work
}
currently, right.png is out of the right boundary of the container div and is hidden behind another named div2 which is at the right side of the container div.
How to make right.png image display on top of div2?
see below structure:
[left.png------ 'I am container div'--------- ][right.png-----I am div2 -------]
for some reason, it is not possible to change the css of div2, so I am wondering if it is possible to set some attribute inside container div then right.png can show up.
see below I draw a picture: I set right.png 125px to show, ideally, it would cover the grey triangle.
Can not add padding to the container, can not change position of div2 (because there are other menus share this part, whole part of container div would turn grey if other menu was clicked.)
Is div2 positioned absolute? If so, you can only place .container higher by positioning it absolute as well and setting the z-index higher than div2, or by placing .container after div2 in the DOM.
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/
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
I have two divs in a container, the right div has a background image. I want to move the background image of right div so that some part (eg. 20px) of it appears in the left div. Is it possible for example using z-index etc? I have tried setting background image position to -20px but its not visible.
Please have a look at jsfiddle: http://jsfiddle.net/k8d6U/1/
The background image will only appear within the boundaries of the element, so you can do this if your right-aligned div overlaps your left-aligned div by the 20 pixels that you want.
Alternatively, you can set the background image of the right div to -20px like you said, but then apply the same background image to the left div and position it 20 pixels from the right. This will give the effect that you're looking for.
Here is an example:
.left {
float:left;
width:200px;
background: orange url("http://i42.tinypic.com/2vxfyc4.jpg") no-repeat 180px 50%;
}
.right {
float:left;
width:200px;
background: #ccc url("http://i42.tinypic.com/2vxfyc4.jpg") no-repeat -20px 50%;
}
In the example, I've also placed the image itself (absolutely positioned) directly below the background image and the widths are the same (in case you needed proof).
I think this is what you are looking for http://jsfiddle.net/k8d6U/8/
z-index works only for relative/absolute/fixed positioned elements the right overlaps the left but the way this is achieved might break on different resolutions.You could simply take that 20px strip add it center right on the left div and add the rest on the right div to fake an overlapping