Jsfiddle
So as seen in the Jsfiddle (You may need to hold ctrl + a) I'm trying to achieve having the div on top of the image, but I tried using a z-index for both the div and the image, and even put the image in a div by itself, but it still hasn't worked.
I was wondering if this is possible in CSS.
The reason is that by default elements are positions statically which means that z-indexes do not apply. Change to a different position such as relative or absolute will make z-index apply.
https://developer.mozilla.org/en/docs/Web/CSS/position#Values
Related
I'm trying to position image on top of colored background as shown in attached image.
I've tried setting it's Z-index higher than other elements. Didn't worked.
Set other elements z-index lower than image Z-index. Didn't worked.
Here is the webpage: https://buyshroomsonline.ca/about/
This is the ID of the image (Girls with Phone). As you can see What I'm trying to make it come on top of all other elements.
#ctrlimg{
position: relative;
z-index: 10;
top:-160px;}
I've also tried setting higher Z-index. Please take a look and help me find what I am missing.
Thanks
Remove overflow:hidden from .vc_row[data-vc-full-width] but make sure do not remove directly from .vc_row as it may have a impact on other sections. so inherit or concatenate .vc_row[data-vc-full-width] with your custom class.
For Example
.yourClass.vc_row[data-vc-full-width]
Hi, I am trying to position two images next to each other and have one of them overlap the other one in a corner.
I have tried using the z-index property but this does not work unless i set the position property to something like fixed or absolute and this messes up the layout of my site.
I was wondering that although i have an image container with the width and height set, can i possibly cut out a section of the container like a rectangle to let the image sit inside the cut like the image below me.
Is this possible?
Thanks!
position:relative positions the element relative to its normal position, and pretends, for document flow, that the element is still there. See this example:
http://jsfiddle.net/GtJMF/
position: relative;
I can't see how having a position:absolute for this scenario would mess up your site.
Put position:relative on your "Image Container". Put position:absolute; right:0, bottom:0; on your "Cut out part" (assuming it is also in the Image Container). This will give you the exact effect you are looking for.
Positioning is relative to the containing positioned parent. Just a position:relative is enough make an element a "positioning master" that all interior positioning will use for its coordinate system.
position:relative also "enables" z-index, but unlike absolute and fixed it doesn't mess up any of the rest of the layout.
To move the position of an image to a certain part of my website, ive put the image in a div tag and used relative position to get it to the place i want it. This works fine for where i want the image to be positioned however there is a downside that it leaves white space behind where it previously use to be and in that space nothing is occupied and it makes the website look ugly. Is there a way to remove that space that it left behind?
as stated above, you should position the element absolute instead. When positioning relative, the element is still within the document flow and therefore occupies its original place in the document. Positioning absolute will remove the element from the flow and make the space available for other elements.
Use absolute positioning instead.
I have two elements (images)
imgA is 2000px high
imgB is 1000px high
I place them one after the other and then move imgB up (I use relative positioning) to overlap the imgA.
Thus, the window in the browser should be 2000px high.
However, it seems, that when placing imgA and then imgB, the browser allocates the place for both of them i.e. 3000px hig, and after I move imgB up to overlap imgA, I have a blank space =1000px left at the bottom of the page.
How can this blank space be prevented?
Thanks
Ignore this
This is because the images are block level elements. To stop the
browser from allocating space you can just add: display:inline-block
to the second image. This will bring the image out of block structure
and so the browser will not allocate it whitespace.
Also have a look at Relatively Absolute positioning, it is very handy for the sort of thing you are doing.
EDITED
As commented below, this does not work. Use instead the Relatively Absolute positioning.
Here is a jsFiddle that shows the code needed to position an image over another
Use display: block on your images, then use position: absolute instead of position: relative to position imgB over imgA.
Don't forget to assign the parent element to anything other than position: static to make the positioning of your image relative to the parent element.
for further clarification you can see the examples of "css block" here
http://www.tutorialswire.com/css/css-display
Absolute positioning is only a specific solution to your case. It may not work in some similar case (For example if you have other elements on top of those two images inside the general containing div).
I believe best solution would be using
margin-top: -1000px;
for the second image.
Basically, I have a form, outside of that form in this random space on my page I want to position a div (containing two buttons). I've looked at using absolute positioning. However, it is positioning it outside of the page wrapper.
How can I get the positioning to be specified from the corner point of the actual page and not the window?
How can I get the positioning to be
specified from the corner point of the
actual page and not the window?
You need to add position: relative to the element you would like the top and left values to be offset from.
That might be your form, or it might be your #container/#wrapper element.
See here for details and a visual: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
Looks like you have your answer by now. But ill post this anyways.
A simple and short example which shows how relative positioning to parent is done.
http://jsfiddle.net/EadXw/
If you want it positioned top:0;left:0 on the page, place it immediately after the <body> tag.
If it is wrapped in anything the containers may change it's position. Make sure it is independant and not influenced by any containers.
Sounds like you should read up a bit on the flow of the DOM.
Positioning with CSS and HTML
Make sure your <form> element wraps your whole "page" and that the <div> with the buttons is the first child of <form>.
When you do this you can add the rule position:relative to the form and position:absolute to the <div> and move it around with top and left.
Another option is to have no position rule on the form and have position:relative on the <div>. This is more compatible with iPad and iPhone devices, which don't like absolute positioning. When you go for this approach be sure to have a fixed height for the <div> and a negative margin-bottom of the same size.