Home > Enterprise >  I want this button on top of div box
I want this button on top of div box

Time:12-17

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.

  • Related