How to position the button properly-CodePudding

I have a simple settings menu and I want to position the toggle open and close button at the right position:

So far I'm here:

.base {
  position: absolute;
  max-width: 30em;
  background-color: #fff;
  padding: 1.125em 1.5em;
  font-size: 1.25em;
  border-radius: 1rem;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3), 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
}

.base::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  bottom: 100%;
  right: 1.5em;
  border: 0.75rem solid transparent;
  border-top: none;
  border-bottom-color: #fff;
  filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, 0.1));
}

html {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 300;
  color: #192229;
  background: linear-gradient(135deg, #F4F2F3, #BFC6D0);
}

html, body {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

body {
  padding: 0 2rem;
}

label {
  font-family: "Montserrat", sans-serif;
  font-size: 1.2rem;
  cursor: pointer;
  display: block;
  margin: 1em;
}

label > input {
  display: none;
}

label span {
  color: #6A759B;
}

label i {
  display: inline-block;
  width: 64px;
  height: 40px;
  border-radius: 20px;
  vertical-align: middle;
  transition: 0.25s 0.09s;
  position: relative;
  background: #deeff7;
}

label i:after {
  content: " ";
  display: block;
  width: 30px;
  height: 30px;
  top: 5px;
  left: 5px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.4);
  transition: 0.15s;
}

label > input:checked   i {
  background: #1094fb;
}

label > input:checked   i   span {
  color: #29316b;
}

label > input:checked   i:after {
  transform: translateX(25px);
}


















.filter {
  position: absolute;
}

.burger {
  display: flex;
  flex-direction: column;
  filter: url(#gooeyness);
  padding: 30px;
}

.rect {
  background: black;
  display: inline-block;
  height: 32px;
  margin-top: 40px;
  transition: transform 500ms;
  width: 200px;
}

.rect:nth-child(2) {
  transition-delay: 100ms;
}

.rect:nth-child(3) {
  transition-delay: 100ms;
}

.burger.active .rect:nth-child(1) {
  transform: rotate(-45deg) translateX(-51px) translateY(50px);
}

.burger.active .rect:nth-child(2) {
  transform: rotate(45deg);
}

.burger.active .rect:nth-child(3) {
  transform: rotate(-45deg) translateX(51px) translateY(-50px);
}




.close {
     position: absolute;
    cursor: pointer;
    transform: scale(0.1);
    z-index: 2500;
}


.settings-container {
   display: flex;
    flex-direction: column;
    width: 500px;
    justify-content: center;
    height: 250px;
    align-items: center;
}

<div class="settings-container">
  

    <div class="close">
       <svg class="filter" version="1.1">
          <defs>
             <filter id="gooeyness">
                <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
                <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10" result="gooeyness" />
                <feComposite in="SourceGraphic" in2="gooeyness" operator="atop" />
             </filter>
          </defs>
       </svg>
       <div class="burger">
          <div class="rect"></div>
          <div class="rect"></div>
          <div class="rect"></div>
       </div>
    </div>



    <div class="base">

       <label>
          <input class="cb cb1" type="checkbox" name="social"  checked/>
          <i></i> 
          <span>آموزش کارت حتی در صورت پاسخ صحیح</span> 
      </label>

      <label>
          <input class="cb cb1" type="checkbox" name="social"  checked/>
          <i></i> 
          <span>ضبط صدا در صورت استفاده از تشخیص گفتار</span> 
      </label>

      <label>
          <input class="cb cb1" type="checkbox" name="social"  checked/>
          <i></i> 
          <span>نمایش جلوه های ویژه ی صوتی و بصری</span> 
      </label>


    </div>

 </div>

The issue is I don't know how to position the toggle button at the right place! here is where I want it to be:

Notice that here on SO you can not see the button here is a codepen for it:

But your problem really stems from a few issues in your css. You can see the step by step below or just jump to the full css at the end. The first is to get it to do what your screen shot is showing you need to do this. Please not I have just uncommented out the code so you can see the changes

.close {
    /*position: absolute;*/
    cursor: pointer;
    transform: scale(0.1);
    z-index: 2500;
}


.settings-container {
   /*display: flex;
    flex-direction: column;*/
    width: 500px;
    justify-content: center;
    /*height: 250px;*/
    align-items: center;
}

this now produces the below

Then for reference purposes I have added a border to your settings-container to illustrate what is happening.

The code that cause this is the transform: scale(0.1) shown below and commented out.

.close {
    /*position: absolute;*/
    cursor: pointer;
    /*transform: scale(0.1);*/
    z-index: 2500;
}

This now produces this result.

Now you can change the burger menu rectangles to the correct size rather than using transform.

.rect {
  background: black;
  display: inline-block;
  height: 5px;
  margin-top: 5px;
  transition: transform 500ms;
  width: 30px;
}
.close {
    /*position: absolute;*/
    cursor: pointer;
    /*transform: scale(0.1);*/
    z-index: 2500;
}

This produces the below result

now you can just position the hamburger menu to right.

.close {
    display: flex;
    justify-content:end;
    /*position: absolute;*/
    cursor: pointer;
    /*transform: scale(0.1);*/
    z-index: 2500;
}

it will look like this

final touches add margin (red border is removed as it was only for illustrative purposes). Your filter was also causing layout issues so I have commented it out.

.burger {
  margin-bottom: 20px;
  margin-right: 35px;
  display: flex;
  flex-direction: column;
  filter: url(#gooeyness);
  /*padding: 30px;*/
}

full css with commented our code

.base {
  position: absolute;
  max-width: 30em;
  background-color: #fff;
  padding: 1.125em 1.5em;
  font-size: 1.25em;
  border-radius: 1rem;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3), 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
}

.base::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  bottom: 100%;
  right: 1.5em;
  border: 0.75rem solid transparent;
  border-top: none;
  border-bottom-color: #fff;
  filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, 0.1));
}

html {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 300;
  color: #192229;
  background: linear-gradient(135deg, #F4F2F3, #BFC6D0);
}

html, body {
  height: 100%;
  display: flex;
  justify-content: center;
  /*align-items: center;*/
}

body {
  padding: 0 2rem;
}

label {
  font-family: "Montserrat", sans-serif;
  font-size: 1.2rem;
  cursor: pointer;
  display: block;
  margin: 1em;
}

label > input {
  display: none;
}

label span {
  color: #6A759B;
}

label i {
  display: inline-block;
  width: 64px;
  height: 40px;
  border-radius: 20px;
  vertical-align: middle;
  transition: 0.25s 0.09s;
  position: relative;
  background: #deeff7;
}

label i:after {
  content: " ";
  display: block;
  width: 30px;
  height: 30px;
  top: 5px;
  left: 5px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.4);
  transition: 0.15s;
}

label > input:checked   i {
  background: #1094fb;
}

label > input:checked   i   span {
  color: #29316b;
}

label > input:checked   i:after {
  transform: translateX(25px);
}

.filter {
  position: absolute;
}

.burger {
  margin-bottom: 20px;
  margin-right: 35px;
  display: flex;
  flex-direction: column;
  filter: url(#gooeyness);
  /*padding: 30px;*/
}

.rect {
  background: black;
  display: inline-block;
  height: 5px;
  margin-top: 5px;
  transition: transform 500ms;
  width: 30px;
}

.rect:nth-child(2) {
  transition-delay: 100ms;
}

.rect:nth-child(3) {
  transition-delay: 100ms;
}

.burger.active .rect:nth-child(1) {
  transform: rotate(-45deg) translateX(-6px) translateY(6px);
}

.burger.active .rect:nth-child(2) {
  transform: rotate(45deg);
}

.burger.active .rect:nth-child(3) {
  transform: rotate(-45deg) translateX(6px) translateY(-8px);
}




.close {
    display: flex;
    justify-content:end;
    /*position: absolute;*/
    cursor: pointer;
    /*transform: scale(0.1);*/
    z-index: 2500;
}
.border{
  border:1px solid red;
}

.settings-container {
   /*display: flex;
    flex-direction: column;*/
    width: 500px;
    /*justify-content: center;
    height: 250px;
    align-items: center;*/
}

CodePudding user response：

move it using the position tag in CSS

https://www.w3schools.com/css/css_positioning.asp

CodePudding user response：

Just add position relative to settings-container so the children of this container will count space Regarding to its boundries and then try this.

.base {
  position: absolute;
  top: 10px: // Change 10px according to your requirement.
  right: 10px: // Change 10px according to your requirement.
  max-width: 30em;
  background-color: #fff;
  padding: 1.125em 1.5em;
  font-size: 1.25em;
  border-radius: 1rem;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3), 0 0.0625rem 0.125rem 
  rgba(0, 0, 0, 0.2);
}