How can I layer a button over a textarea correctly?-CodePudding

I'm building a chatting website and I'm trying to make the "submit message" button to be aligned above the textarea, but I ran into a weird problem. The button is aligned above it, but ( I'm guessing ) because the textarea is resizable, the button is "behind" it in a way.

.center {
  text-align: center;
}

#textarea {
  position: fixed;
  bottom: 10px;
  right: 10px;
  left: 10px;
}

#submit {
  position: fixed;
  bottom: 20px;
  right: 10px;
}

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>
  <div >
    <div >
      <div >
      </div>
      <div >
        <button type="submit" id="submit">Click to send!</button>
        <p ><textarea name="main" placeholder="Write your message here!" id="textarea" cols="30" rows="5"></textarea></p>
      </div>
      <div >
      </div>
    </div>
  </div>
</body>

In the snippet, try to minimize the textarea as much as possible; The button is right above it's minimized state. I thought about fixing it by simply adding margin-bottom to the button but I want my page to be completely responsive for all screen sizes. How could I fix this?

Thanks

CodePudding user response：

Simply by reordering your markup the button is laid over the textarea. It's more semantically correct to have the button after the input anyway.

Note that I've adjusted position styles to better fit your layout. Since you're reducing the size of the textarea you need to override the width that Bootstrap provides (assuming you're using proper form element classes).

Protip: Don't ever tell your users to click somewhere. We all know how to use buttons. It's just not necessary.

.center {
  text-align: center;
}

#textarea {
  position: fixed;
  bottom: 10px;
  right: 10px;
  left: 10px;
  width: auto;
}

#submit {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>
  <div >
    <div >
      <div >
        <p ><textarea name="main" placeholder="Write your message here!" id="textarea" rows="5" ></textarea></p>
        
        <button type="submit" id="submit" >Send!</button>
      </div>
    </div>
  </div>
</body>

CodePudding user response：

Try it like this, The button and the textarea end up in their own individual columns which are col-10 in width. mx-auto then centers the columns.

   <div >
       <div >
            <button type="submit" id="submit">Click to send!</button>
       </div>
       <div >
            <p ><textarea name="main" placeholder="Write your message here!" id="textarea" cols="30" rows="5" ></textarea></p>
            </div>            
        </div>
    </div>