Menu
I have an element with:
position:absolute; left: 70%; can I configure element for example to not move from left more than 900px? something like max-width but for positioning?
707
If position: absolute; or position: fixed; - the left property sets the left edge of an element to a unit to the left of the left edge of its nearest positioned ancestor. If position: relative; - the left property sets the left edge of an element to a unit to the left/right of its normal position.
See Demo on Codepen. You could break this up with just the min() or max() function. If you want the element to always be at 50% width, and not exceed 75ch in width (i.e. on larger screens), write: width: min(75ch, 50%); . This essentially sets a "max" size by using the min() function.
Absolute Positioning You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document. Move Left - Use a negative value for left. Move Right - Use a positive value for left. Move Up - Use a negative value for top.
Position absolute takes the document out of the document flow. This means that it no longer takes up any space like what static and relative does. When position absolute is used on an element, it is positioned absolutely with reference to the closest parent that has a position relative value.
You can use CSS3 Media Queries to achieve that
So:
#element { position:absolute; left: 70%; } If you don't want it to overlay an object when you have a smaller screen or resize the window, you can add after that:
@media all and (max-width: 980px) { #element{ margin-left: 0px; left: 220px; } } When the screen width is less than 980px, the #element object will be fixed to 220px.
112
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
