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.
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'm trying to position the anchor 'Link' in the centre of the red section of the image at all times (all breakpoints). Here I have set the position: absolute; and adjusted it to be perfect.
However if I was add more text to the 'paragraph section' or adjust the current breakpoint, the position of this link would move. I put all my code on CodePen here:
https://codepen.io/anon/pen/PrVQgm?editors=1100
Hard positioning as below;
.hero-hub-image .btn-tertiary {
left: 175px;
top: 120px; }
If you are trying position element on fluid background image you have to use fluid units, so try use calc() function with %units to best fit your elements, e.g.
left: calc(15% + 100px);
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%);
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
I am working on a CSS animated HTML block. I created a fully responsible grid, so these blocks have relative sizes. The block contains a big image to ensure to display the content on all screens correctly. The images in the blocks have 100% width to fit the content, and they also have CSS transitions and transforms.
I would like to center these images vertically, but using only pure CSS. I tried a lot of variations of display, position and vertical-align properties, but no one worked for me. I could easily achieve the proper animation with the background property, but I don't want to create a lot of css classes for all the images (not even with js or jquery).
So could you tell me how to solve this issue with pure CSS? I also created a jsfiddle to demonstrate the problem.
EDIT: I also would like to keep the ratio of the images inside the blocks.
I've created a codepen example of position centrally horizontally and vertically and if you resize it stays in the centre.
http://codepen.io/tom-maton/pen/oqsEJ
In the example I have
margin: auto;
position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;
This makes it h &v positioned centre if you just do
margin: auto 0;
position: absolute;
top: 0;
bottom: 0;
This will position just vertically
Hope this helps
I had a look around and found this link for you:
CSS Tricks - Absolute Center (Vertical & Horizontal) and Image
I hope this can be of some help to you
I have done it on your fiddle too:
Your Fiddle Link
I simply added margin-top: -100px;
EDIT
Sorry didn't realised it wasn't for a fixed size see this updated version:
Fiddle Updated
I used the following code:
position: absolute;
top: 50%;
left: 50%;
height: 100%;
width: 50%;
margin: -25% 0 0 -25%;
I found it here:
6 Methods For Vertical Centering With CSS
You need to define the height: 100%; as well.
demo
if you define the images with css then it could be as ratio as you wish by setting background-size: cover; but to the image it's not possible.
You can't do what you want both retaining the image ratio and your container DIV smaller than image size, you can even set the height:100% to fit image inside the DIV or set DIV to a bigger size (or use smaller image to fit in the DIV) and use line-height:100%
Here are demo for first solution:
Demo changing the ratio
And demo for second solution:
Demo not changing the ratio
(I also set the text-align:center to make sure it is centered even when you don't use width:100%)
Hope it helps you.
The most dynamic solution (in my opinion) is using translateY.
This will move the element from its current position:
see: CSS3 2D transforms
img {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}