Geek asks and answers

Is it possible to position a div on top of another, starting from the bottom, using CSS?

I have a chat window created using HTML, CSS and JS. I want to post from bottom to top. Example: the first div message at the bottom, the second div message at the top of the first, and so on. Is it possible?

+5
source share
4 answers

I cannot imagine a pure CSS solution. But using jQuery, if you already have this library for your project, you can write something like this:

$(':button').click(function() {
   var message = $('input[type=text]').val();
    $('#chat').prepend('<div class="line">'+message);
});

Demo: http://jsfiddle.net/Vbd67/1/

** I changed appendto prependaccording to the comment

+2
source

enter image description here

, , , .

, .

, css: , , , javascript ajax, , pic ..

CSS

<style type="text/css">
table#chat_window {
}
tr#message_row {
}
td#profile_pic {
}
td#message {
}
</style>

HTML:

<table id="chat_window">
  <tr id="message_row">
    <td id="profile_pic"></td>
    <td id="message"></td>
  </tr>
</table>

:

<ul id="chat_window">
  <li id="message_row">
    <div id="profile_pic"></div>
    <div id="message"></div>
  </li>
</ul>

javascript: ajax :

  • , javascript <tr> /, .
  • , , javascript <li> /, .

, , .

+2

jQuery:

var first = $('div > div:first-child');
first.appendTo(first.parent());

, :

$('div > div').each(function() {
    $(this).prependTo(this.parentNode);
});

- .

+1

display:table-cell vertical-align:bottom. Sotiris CSS.

HTML

<div  style="display:table; height:200px;">
    <div style="display:table-row">
            <div id="chat" style="width:400px; border:1px solid black;display:table-cell; vertical-align:bottom">
            </div>
    </div>

</div>
<input type="text"><input type="button" value="post">
​

JavaScript

$(':button').click(function() {
   var message = $('input[type=text]').val();
    $('#chat').append( $('<div/>').text(message) );
});
​

, , .

fiddle

I continued to search for the best solution, because the table layout is always suspicious for me, but I found an article css-tricks about it, and they do the same as I do .. so I think this solution is the right one.

ADD - save scrolling to lower code

As new messages come from the bottom, we need to keep the scroll down. I updated the fiddle link

0
source

More articles:


All Articles