I want this button on top of div box

Question

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 class="wrapper row"
    style="padding: 10px 30px; position: fixed; bottom: 0; border-top: 1px solid #ccc; box-shadow: 0px 2px 10px #888888;">
  
    <button type="button" class="TEST1" id="TEST!">Close</button>
    <p class="col-md-10"
      astyle="color: #262626; font-size: 12px; line-height: 17px; letter-spacing: .1px; padding: 0 30px 0 0;">TEST TEST TEST


    </p>
    <button class="col-xs-12 col-md-2 btn-close-cookie-notification"
      style="background-color: black; border: none; color: white; padding: 13px; cursor: pointer; max-height: 40px; font-size: 12px; position: relative;">OK</button>
  </div>

Is this help? https://stackoverflow.com/questions/10487292/position-absolute-but-relative-to-parent — vee, Dec 17 '21 at 06:22
Does this answer your question? [Position absolute but relative to parent](https://stackoverflow.com/questions/10487292/position-absolute-but-relative-to-parent) — mm4096, Dec 17 '21 at 07:09

score 1 · Answer 1 · answered Dec 17 '21 at 10:19

Please, Check this code

HTML File

 <div class="wrapper">
      <div
        class="row"
        style="
          padding: 10px 30px;
          position: fixed;
          bottom: 0;
          border-top: 1px solid #ccc;
          box-shadow: 0px 2px 10px #888888;
        "
      >
        <button type="button" class="TEST1" id="TEST!">Close</button>
        <p
          class="col-md-10"
          astyle="color: #262626; font-size: 12px; line-height: 17px; letter-spacing: .1px; padding: 0 30px 0 0;"
        >
          TEST TEST TEST
        </p>
        <button
          class="col-xs-12 col-md-2 btn-close-cookie-notification"
          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.

score 0 · Answer 2 · answered Dec 17 '21 at 09:39

0

.TEST1 {
    position: absolute;
    top: -22px;
    right: 0;
}

answered Dec 17 '21 at 09:39

Nikhil Parmar

783
6
10

I want this button on top of div box

2 Answers2