How do i position this element relative to an image?
jsky
How do i position this hotspot element to be (0,0) at top left relative to the image whilst maintaining it in the centre of the container?
Ive tried several things but it keeps being positioned relative to the container because the image is displayed as block to be centered. But I want the button to be relative to the image not the blocked image..
--Update--
I can make it position correctly if i unblock the image but this uncenters it. 
HTML
<div class= "img-container">
<img id ="img" src = "resources/images/androg.front.jpg">
<button id="hotspot-button" class="btn btn-fab"></button>
</img>
</div>
CSS
.img-container{
position: relative;
display: block;
height: 100%;
vertical-align: middle !important;
margin-left: auto;
margin-right: auto;
}
#img {
height: 100%;
//position: float;
position: relative;
display: block;
vertical-align: middle !important;
margin-left: auto;
margin-right: auto;
}
#hotspot-button {
position:absolute;
top:0%;
left:0%;
}
RhapX
You are almost there. All you need to do is update your .img-container to include this:
.img-container{
display: table;
}
This will position the #hotspot-button over the top of the image with the coordinates 0,0 from the top, left.
Here is the link to the JSFiddle.
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
Related
Related Related
- 1
How to position an element relative to the background image width
- 2
How to position an element relative to the background image width
- 3
How can I position a div relative to an image?
- 4
How can I position a div relative to an image?
- 5
CSS: How can I position an element relative to an image with background-size: cover?
- 6
How do I position a div relative to a fixed position div?
- 7
How do you position an element relative to centered sibling
- 8
How can I get the position of an element relative to the broswer viewport
- 9
How do i position a div relative to the window page (responsive css)
- 10
How do I remove white space due to position relative of CSS?
- 11
Qt - How do I get a QGraphicsItem's position relative to scene
- 12
How to position a relative element after a fixed element
- 13
How do I position an image in android
- 14
How to use absolute position relative to parent element
- 15
How to have fixed position of element but relative to container
- 16
How to use absolute position relative to parent element
- 17
How to get element position relative to parent?
- 18
How to get the current position of an element relative to the window
- 19
How do I only display the contents that is relative to the image?
- 20
How do I make a div height or position adapt to its content's relative position
- 21
Javascript, game, How can I determine the position (x,y) of a div element relative to a parent div in javascript?
- 22
Absolute position relative to an image
- 23
How do I position buttons so they align horizontally with another element?
- 24
How do I insert an element at the correct position into a sorted array in Swift?
- 25
How do I get the offset of an element from the current screen position?
- 26
how do I properly position a button element with css?
- 27
How do I change the position of this element on the ViewController programatically?
- 28
How do I offset an element based on my mouse position?
- 29
In R how do I get the position at which there is a change in the element of a vector
Comments