how to find position of an element within a div
eg:
<div style="width:100px;overflow:hidden">
<img id="img_1" src=""/>
<img id="img_2" src=""/>
</div>
<input type="button" onclick"fnscroll()">
consider the second image is hidden.
how to bring that second img in the visible area of the div? at a single button click.
how to find the img position ie, x-y position
using javascript
If you want to position every image in the div on the same place, you might want to consider setting the position style to absolute and alter the z-index of the images via javascript.
Example of the CSS:
div img { position: absolute; top: 0; left:0; }
#img_1 {z-index: 1;}
#img_2 {z-index: 2;}
Replace <ELEMENT> with element in DOM Document
To find x,y coordinates
var x=<ELEMENT>.style.left
var y=<ELEMENT>.style.top
Use same properties to bring image to visible area
And if you want absolute position of image loop over it till you find body tag
Related
I need to place the first div over the below div.First div contains a png image and second div contains a background texture.
The problem is the second div is in footer and that is common for other pages also.And that was in seperate php file and was included. So I can't able to edit the second div.
How can I achieve this by only styling the first div?
<div style="">
<img src="sample.png">
</div>
<div style="background-image: url('bg.jpg');">
</div>
below div is in another php file.
If you want to overlap two html element then you have to use position absolute in css you can write css something like this
.firstdiv
{
position :absolute;
top: 20px; /* as per your design you can change it */
}
I want to align images like shown in the Aligned Images link at the bottom of the website. I just mean that I want to place many movies dvd covers on the bottom of the page so it becomes easy to access any movies directly. So if someone hover the movie Blast than it will pop up. Can anyone help me out.
img {
position: absolute;
bottom: 0;
}
And a fiddle: http://jsfiddle.net/dwtp7pje/
Note that if you put the image inside of another div, you need to assign that div a position: relative; for it to work.
Edit: if you're looking to place several images at the bottom, place the images in a div like this:
<div>
<img src="http://orig12.deviantart.net/2b79/f/2008/314/e/8/my___dark_knight___dvd_cover_by_esbe77.jpg" alt="">
<img src="http://orig12.deviantart.net/2b79/f/2008/314/e/8/my___dark_knight___dvd_cover_by_esbe77.jpg" alt="">
<img src="http://orig12.deviantart.net/2b79/f/2008/314/e/8/my___dark_knight___dvd_cover_by_esbe77.jpg" alt="">
</div>
with css:
div {
position: absolute;
bottom: 0;
}
img {
max-width: 33%;
}
And the fiddle: http://jsfiddle.net/dwtp7pje/1/
this is in css
.fix{
position:fixed;
bottom:0px;
}
and your html
<img src="yourimagepath" class="fix"/>
absolute: An absolutely positioned based on its nearest relatively positioned parent element.
fixed: Fixed elements are completely independent on the web page. Regardless of any parents, a fixed position element will always be fixed at a point based on the window of browser
Try the following code.
<img src="http://i.imgur.com/KjuqA1l.png" style="position:fixed;bottom:0px;">
Update:
<img src="http://i.imgur.com/KjuqA1l.png" style="position:fixed;bottom:0px;max-width:100%;">
I'm trying to make "meme"-looking captioned images with CSS using an <img> object and two <p> objects styled with CSS. Right now I have a <div> which contains the <img> and then the two <p>'s. What I want to do is have the picture positioned in the top-left corner of the div and then I set the z-index to -1 and THEN somehow position the two p objects over the image but positioned relative to the top-left corner of the div.
This is so I can set the top: y and left: x values of the p objects such that they will be positioned accordingly relative to the top-left of the div and in turn the image.
But when I try to set position: relative for the p objects there's a problem where the first p is correctly placed but the 2nd p is positioned relative to the first one so even though it's at top: 0, left: 0 it's still lower than it should be.
How can I fix this?
check out this jsfiddle:
http://jsfiddle.net/56J8y/1/
relevant CSS
.meme_container {
position: relative;
}
.meme_container .top_meme {
position:absolute;
top:0;
left:0;
}
.meme_container .bottom_meme {
position:absolute;
bottom:0;
left:0;
}
and the html
<div class="meme_container">
<img src="https://www.google.com/images/srpr/logo3w.png"/>
<p class="top_meme">This is a caption 1</p>
<p class="bottom_meme">This is a caption 2</p>
</div>
One way is to use Pseudo element like :after and :before
Example:
img:after {
content: "Hello, I am the caption";
}
I think you are talking about this situation:
<div>
<img />
<p class="first">caption1</p>
<p class="second">caption2</p>
</div>
Then to do what you want you need to set the positioning of the div to something (relative will generaly not affect your behaviour so its a good choise). Once that is done postioning absolute can be used inside. Absolute refers to the next higher positioned element!!
div{position:relative};
p{position:absolute};
p.first{top:10px};
p.second{top:20px};
I am constructing a website based off of the Fluid 960 GS System. I want to overlay an image in the header so that it stays put relative to the header image without disrupting the header itself. If I use the following CSS, I get halfway there:
.imgFloat {
position:absolute;
left:400px;
top:-2px;
z-index:1;
}
<div class="grid_16">
<h1 id="branding">
<img src="img/logo.png" />
<img src="img/float.png" class="imgFloat" />
</h1>
</div>
The only "issue" (not really since the CSS is doing what it is supposed to) with this code is that the image stays put rather than being staying x pixels away from the header image like I want.
If I change the position to relative, it breaks the size of the header and thus the layout of the header itself, but it will position the image like I want.
Is there a happy medium CSS "trick" that I can apply to achieve this result?
Thanks in advanced!
You just need to make sure that the absolute positioned element is inside the element you want it to be relative to. Then just add position: relative to that element and it should work.
So:
tag(position:relative)
ag(position:absolute; left:2px)
Should work
I'm just guessing here since the code you're showing is not detailed enough ;)
Update:
#branding {position:relative}
.imgFloat {
position:absolute;
left:400px;
top:-2px;
z-index:1;
}
set position: relative on the header element that wraps the .imgFloat element that should lock an absolutely positioned element to the wrapper.
Also you'll need to change your positions since the left will be relative to the 0,0 coordinate of the wrapper element.
I am having trouble positioning a corner image on to of an image. The span which have an little background image should be in the top left corner on top of the image.
Here is my code:
<div id="wrapkon">
<span style="width: 4px; height: 30px;display:block;position:absolute;top:0px;left:0px; background-color:#000;background: url(../images/konboxleft.png) no-repeat;"></span>
<a target="_blank" href="/link/11"><img style="width:125px; height:125px;" src="image.jpg" alt="21883"></a>
div>
Have a look here: http://jsfiddle.net/jdmiller82/F8ZPG/
You need to set a position relative to your #wrapkon.
also, top and left values should not be in px.
When you use position: absolute;, you need position: relative; on the parent.
You should give your <div id="wrapkon"> a position: relative style.
Check to make sure wrapkon has position: relative on itself, or the span which you have absolutely positioned will not appear inside it. See this: http://css-tricks.com/absolute-positioning-inside-relative-positioning/