How to position the button properly - html

Question

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:
https://codepen.io/pixy-dixy/pen/OJjJygg?editors=1100

Answer 1

So the fist issue is that your code produces an different to the one you show in your screenshot. The hamburger menu is in a different place as shown in the image below.
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;*/
}

Answer 2

MDN
CSS positioning is used here to place the element in the desired spot.
Notice that I added position: relative to .settings-container and position: absolute to .close.
The addition of position: relative is used because...
It (the absolutely positioned element) is positioned relative to its closest positioned ancestor, if any;
otherwise, it is placed relative to the initial containing block.
Then the element you are positioning gets position: absolute which will place the element relative to .settings-container which is now the "closest positioned ancestor".
.base {
position: relative;
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 {
cursor: pointer;
transform: scale(0.1);
position: absolute; /* added */
top: -170px; /* added */
right: -88px; /* added */
}
.settings-container {
display: flex;
flex-direction: column;
position: relative; /* added */
}
<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>

Answer 3

move it using the position tag in CSS
https://www.w3schools.com/css/css_positioning.asp

Answer 4

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);
}