I am trying to position an image on top of another image using transform:
position: absolute;
translate(65vw, -40vh);
When I resize the view port the image doesn't stay put.
How would I place a small image on a larger canvas and ensured it stayed put when I resized the view port?
Thanks!
To position the element use left and top, to position the center of the element at the desired point use translate. Try something like this:
position: absolute;
left:65vw
top:40vh;
transform: translate(-50%, -50%);
Related
I want to animate some sort of floating div.
When the div is in the status 'close' , most of it is hidden on the right of the screen, with only 20px still visible.
When I click on the visible part, the div move to the center of the screen, revealing itself.(it's what I call the status open)
My issue are:
I only know how center a div with margin:auto, which do weird stuff when I animate it
when the div is 'closed', the 'hidden' part create an overflow who add a scrolling. I don't want that
the div have a width who change a lot, depending of the case. Consequently, I cannot use a lot of hard coded value in CSS.
Any idea how to do this?
Even a partial solution would help me.
Edit : the solution (thanks to #sonic)
.open{
translateX(-50%);
left:50%;
}
.close {
translateX(-20px);
left:100%;
}
Its too open question to be able to help with 2,3 points, its hard even to say what is the objective and without code, who knows...
Centering div like that:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
you can easly animate those properties.
I have an image that I want to put a few 'pins' on. I know how to get pins on the image, but the issue is that when the browser is resized, the image will scale but the pins won't stay match/stay on top of the desired position.
Does someone have an example of this type of functionality working?
Yes. The fiddle you posted is correct. The image has to be wrapped into an element with a
position: relative;
display: inline-block;
Then inside you also put the pins with:
position: absolute;
top: 50%;
left: 50%;
Then adjust the top and left based on where you wish to place them.
I just want to know with the experience of the others which solution do you use generally to position an element out of the natural flow?
- Transform: translate
- Position: Absolute.
Thank's :)
All depends.
position:absolute actually can work together with transform:translate. For example, if you want to place a div (dynamic height/width) you can do below:
<div id="mydiv">
<!-- Dynamic content here meaning height and width could change -->
</div>
#mydiv {
position: absolute;
top: 50%; /* Top of element would appear in the centre */
left: 50%; /* Left of element would appear in the centre */
transform: translate(-50%, -50%); /* Bring the element centre to area centre */
/* I'm lazy to make above lines cross browser but you shouldn't */
}
In above case, if the parent element is the full height and width of the window, the box will stay in the centre.
Hope this give you some inspirations.
position : absolute
*this does pose issues for responsive pages.
I have currently having issues keeping my div in the same place when the window is resized. In the example, it is .add div. The issue I am having is that it is going above the view region of the page, and I can't scroll to that portion of the page so I can't even see that when I resize.
Here is the code.
http://jsbin.com/kazizeruxi/1/
This is the part that I have tried dealing with
<div class = "add" align = "center">
<!--Everything inbetween -->
</div>
Ideally I am trying to keep the entry (in the farthest up left) to stay in the upper left no matter how it is resized.
I have tried messing around with media queries, but to no avail. It just turned out to be very inefficient with different browser sizes.
Any suggestions?
Just give them a absolute position.
.add {
position: absolute;
}
The proper way to do that is to give your element the position : fixed then it will have a fixed position from the root element or the body not the parent.
let us say you want it to be centered on the screen you can use this
.add{
position: fixed;
top: 50%;
left: 50%;
transform: translate3d(-50%,-50%,0)
}
of if you have a fixed with and height you can use margin instead of transform
.add{
position: fixed;
top: 50%;
left: 50%;
margin: -50% 0 0 -50%
}
if you give it an position: absolute and the parent has a position: relaive then it will move with the parent element on resize
How do I place an object in css to move in relation to the size of the window browser?
I tried the following types of positioning: Fixed, Absolute, and Relative. The problem I have with these are that when ever I change the size of the window browser, it stays in the same exact spot and does not move with the browser size.
Thanks in advance for the help!
You must be defining top, bottom, left, right using px, so you need to use % instead
Demo
<div class="hello">
Whatever
<div>
.hello {
position: absolute;
top: 50%;
left: 50%;
}
Make sure if you are using absolute position, than wrap it inside a relative positioned container, so that it doesn't flow out in the wild
Without any information I'm going to assume your using pixels as your top and left? What you may want to try is:
.my-class {
position: absolute;
top: 20%;
left: 20%;
}
You can also position based on specific sizes using #media queries in css