I want this button on top of the div box, but I have no idea what css code I should use. This below is what I want to do, but I have no idea how to do What I want to do I tried a lot of different ways including padding and margin, but I can't get it to work.
.wrapper {
background: white;
}
.TEST1{
float:right;
position: relative;
}
<div
style="padding: 10px 30px; position: fixed; bottom: 0; border-top: 1px solid #ccc; box-shadow: 0px 2px 10px #888888;">
<button type="button" id="TEST!">Close</button>
<p
astyle="color: #262626; font-size: 12px; line-height: 17px; letter-spacing: .1px; padding: 0 30px 0 0;">TEST TEST TEST
</p>
<button
style="background-color: black; border: none; color: white; padding: 13px; cursor: pointer; max-height: 40px; font-size: 12px; position: relative;">OK</button>
</div>
CodePudding user response:
.TEST1 {
position: absolute;
top: -22px;
right: 0;
}
CodePudding user response:
Please, Check this code
HTML File
<div >
<div
style="
padding: 10px 30px;
position: fixed;
bottom: 0;
border-top: 1px solid #ccc;
box-shadow: 0px 2px 10px #888888;
"
>
<button type="button" id="TEST!">Close</button>
<p
astyle="color: #262626; font-size: 12px; line-height: 17px; letter-spacing: .1px; padding: 0 30px 0 0;"
>
TEST TEST TEST
</p>
<button
style="
background-color: black;
border: none;
color: white;
padding: 13px;
cursor: pointer;
max-height: 40px;
font-size: 12px;
position: relative;
"
>
OK
</button>
</div>
</div>
CSS File
.wrapper {
background: white;
position: relative;
}
.TEST1 {
position: absolute;
top: -10px;
right: -10px;
z-index: 999;
}
Demo link: https://stackblitz.com/edit/web-platform-nd9jej?file=styles.css
Note: Please add top
and right
css according your usability.