Text is breaking using absolute positioning

后端 未结 4 717
庸人自扰
庸人自扰 2021-02-13 23:04

I have a small challenge that I haven\'t found any solution on Stack Overflow.

That\'s what I got:

4条回答
  •  心在旅途
    2021-02-13 23:19

    your code was correct but the left attribute spoiled your output. as your .content div was set to relative, the .title will remain inside it. So you just need to change the position your .title using transform: translate(); code. And voila you got your desired output.

    You might notice i have given padding-top to the .content just to place the heading in a proper place.

    the changed code is as follows :

    /* Cosmetics */
    * { box-sizing: border-box; }
    body { margin: 50px; }
    p { margin: 0; }
    
    
    /* True Code */
    .content {
      border: 3px double black;
      padding-top:10px;
      position: relative;
      width: 350px;
    }
    
    .content p { margin: 20px; }
    
    .title {
      background: black;
      border-radius: 5px;
      color: white;
      padding: 10px;
      position: absolute;
      transform: translate(22%,-110%);
    }
    

提交回复
热议问题