Put the cross on the top right page instead of the left

Question

how can I put the cross on the top right side of my page? For now it appears on the left side.

.close {
    vertical-align: middle;
    border: none;
    color: inherit;
    border-radius: 50%;
    background: transparent;
    position: relative;
    width: 32px;
    height: 32px;
    opacity: 0.6;
}
.close:focus,
.close:hover {
    opacity: 1;
    background: rgba(128, 128, 128, 0.5);
}
.close:active {
    background: rgba(128, 128, 128, 0.9);
}
.close::before,
.close::after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    height: 20px;
    width: 4px;
    background-color: currentColor;
}
.close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
.close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

My snipped code :https://jsfiddle.net/Lcqy3srg/3/

@MohamedGhulam I tried but it says 'your post is mostly code' — Zokulko, May 14 '22 at 14:40
Weird, because it works on the spot: https://jsfiddle.net/5rpyozdw/ Also, "not working" is a useless problem description. — , May 14 '22 at 14:42
@MosiaThabo Yes, so? Did you not see my previous comment and OP's reply? — , May 14 '22 at 14:48
This is a very poor question. In your `.close` style you didn't define the position. yet you want it to be positioned out of nowhere without telling it to. — Mosia Thabo, May 14 '22 at 14:48
@Zokulko learn more about absolute positioning here: https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwjsrpHhnt_3AhUQEcAKHY-uA3gQFnoECAMQAQ&url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FCSS%2Fposition&usg=AOvVaw2FFc5t6zxL7lglQmPh88Yc — Mosia Thabo, May 14 '22 at 14:51
Please check https://jsfiddle.net/Lcqy3srg/3/, I've put all my code — Zokulko, May 14 '22 at 14:52

noname · Answer 1 · 2022-05-14T18:48:29.843

float

Use float: right on .close

MDN

/*Button to quit the form*/

.close {
  vertical-align: middle;
  border: none;
  color: inherit;
  border-radius: 50%;
  background: transparent;
  position: relative;
  width: 20px;
  height: 20px;
  opacity: 0.6;
  float: right;
}

.close:focus,
.close:hover {
  opacity: 1;
  background: rgba(128, 128, 128, 0.5);
}

.close:active {
  background: rgba(128, 128, 128, 0.9);
}


/* tines of the X */

.close::before,
.close::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 0;
  height: 20px;
  width: 3px;
  background-color: currentColor;
}

.close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

<div>
  <button class="close" aria-label="Close"></button>
</div>

position

Using position: absolute and right: 0px will result in the same effect. It however requires more work, and might not work in many cases where you need to use a position other than absolute. (for example in this case, it gives a scroll bar because it was intended to use relative)

MDN

/*Button to quit the form*/

.close {
  vertical-align: middle;
  border: none;
  color: inherit;
  border-radius: 50%;
  background: transparent;
  position: absolute; /*Changed to absolute*/
  width: 20px;
  height: 20px;
  opacity: 0.6;
  right: 0px;
}

.close:focus,
.close:hover {
  opacity: 1;
  background: rgba(128, 128, 128, 0.5);
}

.close:active {
  background: rgba(128, 128, 128, 0.9);
}


/* tines of the X */

.close::before,
.close::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 0;
  height: 20px;
  width: 3px;
  background-color: currentColor;
}

.close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

<div>
  <button class="close" aria-label="Close"></button>
</div>

score -1 · Answer 2 · edited May 15 '22 at 08:28

-1

you simply can add div "content" as parent of div "close"

 .content {

    position:absolute ;
    top:0;
    right:0;
}

Code screenshot:

edited May 15 '22 at 08:28

RBT

24,161
21
159
240

answered May 14 '22 at 14:54

Sanae

21
2

Already try it but not working either: https://jsfiddle.net/Lcqy3srg/3/ – Zokulko May 14 '22 at 14:58

Put the cross on the top right page instead of the left

2 Answers2

float

position