im trying to move my hyper link to the bottom left of my webpage. now, the hyperlink is at the top left of my webpage.

thank you in advance for everyone that comments :]

this is the line of code that i added to try to move my link down (failed):

transform-origin: left bottom 0;

{
  font-family : Times New Roman;
  font-weight : bold;
  font-size : 18px;
  color : #25374C;
  color : rgb(37, 55, 76);

  transform: rotate(270deg);
  transform-origin: left bottom 0;

  text-decoration: none;
  position: relative;
  top: 6px;
}

<p ><a href="mailto:[email protected]?subject=Subject Content&amp;body=Body Content" style="text-decoration: none;">[email protected]</a></p>

CodePudding user response：

Position property only works on block level, so you have to specify the p tag as a block or inline-block depending on what you need, you can check the differences between them if you wish on w3schools, besides, the position relative refers to the parent position if available, but if not, then it refers to the document, so I recommend using absolute position, and you can read about the differences on CSS Tricks or any other resource.

Resources: Positioning: Positioning Inline vs Block: Inline vs Block

So your styling should be something like this:

  p {

  display:inline-block;
  position: absolute;
  bottom: 3vh;
  left:5vw;

  font-family : Times New Roman;
  font-weight : bold;
  font-size : 18px;
  color : #25374C;
  color : rgb(37, 55, 76);

  transform: rotate(270deg);


  text-decoration: none;

}

CodePudding user response：

Can you be more specific on your question. I noticed your css is top:6px;

try to put bottom:6px; your position is relative (try absolute) as well or

transform-origin: bottom left 0px;

I am not sure if this answer your question but hopefully this can help. You usually put the div or your paragraph at the bottom part of your html so it is at the bottom part. I am really guessing on what you want to happen but if you give more specifics I will be able to help you on what you want.

CodePudding user response：

Try to add this lines

.socials-email a {
        font-family: 'Times New Roman', Times, serif;
        font-weight: bold;
        font-size: 18px;
        color: #25374C;
        position: fixed;
        bottom: 1%;
        text-decoration: none;
    }