How to define absolute positioned element's anchor point?


Tags: html,css

Problem :

Is it possible to define positioned element's anchor point without CSS transformations ?

I want to place an arrow before a variable centered div, but I have to define offset (left: -20px;).

If I were to increase the font size, the gap between the arrow and the block wouldn't be proportionate any more.

How can I define my absolute positioned element's anchor as top right corner instead of top left ?

HTML :

<div id="block">
   back
   <div id="arrow">&larr;</div>
</div>

CSS :

#block {
   height: 20px;
   width : 40px;
   margin: 0 auto;
   border: 1px solid black;
   position: relative;
}

#arrow {
   position: absolute;
   left: -20px;
   top : 0;
}

In this example the block is of fixed width, but in my code it is variable. Might need adiffrent solution.

http://jsfiddle.net/J7XnB/1/

Thank you !



Solution :

You can achieve this using em as a unit of measurement, rather than absolute pixels:

#block {
    font-size: 16px;
    height: 1em;
    width: 2.5em;
    margin: 0 auto;
    border: 1px solid black;
    position: relative;
}

#arrow {
    position: absolute;
    left: -1em;
    top: 0;
}

Using em to measure the height and width of the #block also has the added advantage that if the font size is changed, then the box resizes to fit the text accordingly.

You can see it working here: http://jsfiddle.net/J7XnB/2/

(Just change the font-size property to see it change.)


    CSS Howto..

    How can I style flexbox children in a multiline

    how to make css submenu stay put when subpage has been selected

    How to hide

    How to vertically center image and text in a block element? [CSS]

    HTML: How to style each table cell in a column via CSS?

    How do i make this nav 100% wide?

    How to shield a HTML tag from CSS?

    Inheriting CSS how do I stop it?

    How to set z-index for a shadow (CSS)

    How to scale image with with transition CSS? [closed]

    How can I hide text in this jquery slider?

    Tag image in svg invisible in FireFox because of using style. How to fix?

    How to override CSS style for a specific element if its parent has a specific class

    How to scale html font size in Bootstrap 4 without breaking responsive navbar

    How do I do the css for this?

    only show those div where i do mouse-over

    How can I pull Data from an SQL table using PHP inside an HTML

    CSS table: How to position action buttons left to each row

    How to use a different stylesheet for iphone or android? I can modify only html later on

    How to target multiple table rows with a single CSS rule?

    how to stop this irritating css behaviour

    Bootstrap tooltip showing behind modal window

    How to put all my elements in line horizontally and Should be Responsive using bootstrap?

    How to highlight the parent item in active state without the children being affected in wordpress navigation?

    How to make a hidden border side inherit border properties in CSS

    simple text input box “autosuggest” script - how to overlap with css

    How to iqnore mousemove event on child ul

    How to use a CSS animation within a JavaScript plugin?

    How to change css pseudo elements in javascript? [duplicate]

    How do I get my textboxes to align properly once triggered? - jQuery/CSS