Question

I’m trying to create an info tag that hangs off of a block element on a page but having some trouble getting the positioning right. To get the idea of what I’m trying to do, see the attached image. The content block is actually a right side column on the page.

<div class="contentblock">
  <span class="tag">tag</span>
</div>

div.contentblock{
  width: 575px;
  float: left;
  margin-left: 20px;
  margin-top: 20px;
  min-height: 300px;
  display: block;
  position: relative;
  padding: 15px;
  ...
}

span.tag{
  font-size: 14px;
  margin-left: 495px;
  color: rgba(65,65,66,0.6);
  display: inline-block;
  text-align: center;
  text-transform: lowercase;
  position: absolute;
  margin-top: 115px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 2px;
  padding-bottom: 5px;
  background: #fff;
  margin-bottom: -145px;
  min-width: 60px;
  width: auto !important;
  white-space: nowrap;
  -webkit-transform:rotate(90deg);
  -moz-transform:rotate(90deg);
  -o-transform: rotate(90deg);
  border: 2px solid rgba(65,65,66,0.5);
  border-bottom: 0;
}

This sort of works – the attached image is actually the result of that, but it doesn’t work very well because the horizontal placement of the tag seems to be affected by the length of the tag. Longer text in the <span pushes> it off to the right (it also expands it vertically downward – as it should). Hence the semi-arbitrary margin-left on the tag element – that just happens to work for one particular string of text.

I think I’m going about this the wrong way. What would be a more effective way to accomplish this?

Answer 1

Since you are not specifying a transform origin, it is defaulting to the middle of the element. As a result, changing the amount of text will offset the middle and cause the transformation to change.

You should specify a transform-origin (and all the vendor extensions) to something fixed, such as the top-left corner, and then position based on that.

Note that -ms-transform is perfectly functional too.