CSS Position Absolute Making the Textbox Go Down

Position DIV above Input Box without changing position of Input Box

You simply need to position your <div> absolutely:

div.someclass {
    position: absolute;
    top: 0;
    left: 0;
}

Absolutely positioned elements are entirely outside the "flow" of HTML and so do not affect the rendering of other elements. The example above places the <div> at the top-left corner of its parent; you can move it by changing the values of the top and left properties. Negative values are allowed, if you need them, and you can also use bottom or left if you prefer. Setting both top and bottom but not a height can be used to stretch your <div> vertically based on the height of its parent (and similarly for left, right, and width).

The <div>'s parent needs to establish "context", usually done by adding "position: relative", but it isn't safe to apply that style to table cells. Instead, you should wrap the contents of your cell with an outer <div>:

<td>
    <div class="outerclass">
        <div class="someclass">images</div>
        <input type="text" maxlength="2" class="timebox" />
    </div>
</td>

Then apply position to that new <div>:

div.outerclass {
    position: relative;
}

CSS Position relative goes over fixed how to fix this?

My first guess is to give #ChatText a z-index value, maybe -1.

How to prevent an absolutely positioned element to affect the scrollbar?

This seems a bit of a janky approach and has a small caveat, but it's pure CSS/ no HTML structure modifications.

Essentially, I make the .container the main parent instead of trying to work from a lower level (.autosuggest). Step by step:

• Move position: relative up to .container
• Make the .autosuggest positioned absolutely (top / left default to 0px).
  
  
  • Give it a higher z-index so it's always on top
• make .content positioned absolutely all four sides 0px so it's same size as .container
• Move the overflow scrollbar to the .content div
• (here's the caveat) Set the top padding of .content to the height of .input + the actually desired padding. Otherwise the .content is behind the input element.

And you end up with this:

    .container {      height: 100px;      width: 300px;      margin-top: 50px;      border: 1px solid black;      position: relative;    }    .autosuggest {      width: 250px;      position: absolute;      z-index: 50;    }    .input {      font-size: 16px;      width: 230px;      padding: 5px 10px;      border: 0;      background-color: #FFEBBF;    }    .autosuggest .input:focus ~ .suggestions{      display: block;    }    .suggestions {      display: none;      list-style-type: none;      margin: 0;      padding: 5px 10px;      width: 230px;      background-color: #85DDFF;    }    .content {      overflow-y: auto;      position: absolute;      top: 0;      left: 0;      right: 0;      bottom: 0;      padding: 28px 10px 5px;    }

<div class="container">  <div class="autosuggest">    <input class="input" type="text" value="input">    <ul class="suggestions">      <li>suggestion 1</li>      <li>suggestion 2</li>      <li>suggestion 3</li>      <li>suggestion 4</li>      <li>suggestion 5</li>      <li>suggestion 6</li>      <li>suggestion 7</li>      <li>suggestion 8</li>      <li>suggestion 9</li>    </ul>  </div>  <div class="content">    content content<br >content content content content content<br ><br ><br ><br ><br ><br >content content content  </div></div>

Relatively position an element without it taking up space in document flow

What you're trying to do sounds like absolute positioning. On the other hand, you can, however, make a pseudo-relative element, by creating a zero-width, zero-height, relatively positioned element, essentially solely for the purpose of creating a reference point for position, and an absolutely positioned element within that:

<div style="position: relative; width: 0; height: 0">
    <div style="position: absolute; left: 100px; top: 100px">
        Hi there, I'm 100px offset from where I ought to be, from the top and left.
    </div>
</div>

Absolute Positioning of button inside textarea

You don't really can get away from padding as this is the right thing to do in your case.
(else please state why don't you want to use padding?)

Check this code out, maybe you'll find it more elegant to use the icon as a background-image.
You could play with the width, height, and padding-right values:

HTML part:

<textarea>hello hksjf askdjfj akldfla </textarea>

CSS Part:

textarea {
    width: 100px;
    height: 50px;
    padding-right: 20px;
    background-image: url('http://www.isilo.com/support/manual/iSiloIP/img/gearIcon.gif');
    background-position: top right;
    background-repeat: no-repeat;
}

Also in jsFiddle:
http://jsfiddle.net/nQkEG/

How to align content of a div to the bottom

Relative+absolute positioning is your best bet:

#header {
  position: relative;
  min-height: 150px;
}

#header-content {
  position: absolute;
  bottom: 0;
  left: 0;
}

#header, #header * {
  background: rgba(40, 40, 100, 0.25);
}

<div id="header">
  <h1>Title</h1>
  <div id="header-content">And in the last place, where this might not be the case, they would be of long standing, would have taken deep root, and would not easily be extirpated. The scheme of revising the constitution, in order to correct recent breaches of it, as well as for other purposes, has been actually tried in one of the States.</div>
</div>

CSS: how to position element in lower right?

Lets say your HTML looks something like this:

<div class="box">
    <!-- stuff -->
    <p class="bet_time">Bet 5 days ago</p>
</div>

Then, with CSS, you can make that text appear in the bottom right like so:

.box {
    position:relative;
}
.bet_time {
    position:absolute;
    bottom:0;
    right:0;
}

The way this works is that absolutely positioned elements are always positioned with respect to the first relatively positioned parent element, or the window. Because we set the box's position to relative, .bet_time positions its right edge to the right edge of .box and its bottom edge to the bottom edge of .box

---

Related Topics