Basically after doing research i found out that the only way fro the text in a text box to start from the bottom and go up without overflowing down is to set position absolute and relative.

But by doing so it goes over my fixed nav bar.

Any way to fix this issue?

# ChatName{
    width: 99%;
    height: 20px;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 5px;
    border: 
# 000000 solid 1px;
}

# ContentWrapper{
    width: 100%;
    height: 600px;
}

# ChatBig {
    float: left;
    width: 45%;
    height: 600px;
    margin-left: 20px;
    overflow: hidden;
    border: 
# 000000 solid 1px;
    resize:none;
    position: relative;
}

# ChatMessages{
    width: 100%;
    bottom: 55px;
    margin-bottom: 5px;
    resize:none;
    font-size: 16px;
    font-weight: normal;
    overflow:hidden;
    position: absolute;
}

# ChatText{
    width: 100%;
    height: 50px;
    resize:none;
    overflow:hidden;
    position: absolute;
    bottom: 0;
}

# ChatText:focus{outline: none;}

# RightContent{
    width: 25%;
    height: 600px;
    float: right;
    margin-right: 10px;
    border: 
# 000000 solid 1px;
    overflow: hidden;
}

# Online{
    width: 100%;
    height: 100px;
    overflow: hidden;
    text-align: center;
}

# IsOnline{
    width: 100%;
    height: 24px;
    border: 
# 000000 solid 1px;
}

# IsActive{
    width: 100%;
    height: 24px;
    border: 
# 000000 solid 1px;
}
body {
    background-color: 
# edf0f5;
}

# Holder {
    width: 100%;
}
.UserNameS{
    color: 
# 7CB9E8;
}
.UserNameS:hover{text-decoration:underline; cursor: pointer;}

# nav{
    width:100% !important;
    height: 50px;
    background-color: orange;
    box-shadow: 0 4px 2px -2px gray;
    position:fixed;
    padding:0;
    margin:0;
    overflow: hidden;
    top:0;
    left:0;
}

# UserNav{
    float: right;
    width: 33%;
    height: 50px;
    text-align: right;
    margin-right: 30px;
    margin-top: 10px;
}

# CreteChat{
    width: 33%;
    height: 50px;
    float: right;
    margin-top: 10px;
}

# Logo{
    float: left;
    width: 30%;
    height:50px;
    margin-left: 10px;
    margin-top: 10px;
}

# ChatCreate {
    width: 300px;
}

# Wrapper {
    width: 100%;
    height: 720px;
}

and i want it to be like this

but when its like this look how my text bar disappears and texts goes blow the box border

asked Jun 23, 2015 at 15:31

My first guess is to give `

ChatText` a z-index value, maybe -1.

answered Jun 23, 2015 at 15:38

Marc AudetMarc Audet

46.2k11 gold badges63 silver badges83 bronze badges

3

Old post, but Marc's answer may be an issue if you've got numerous things in your body and want your nav to stay on top, so it's better to give the `

nav` a high z-index (like 100) instead.

So, I tried the code given below (copied from w3schools), to see if equal values of top/bottom/left/right would effectively cancel out the individual movements, and keep the element in it's original position, but it didn't work. The element seems to have moved to the 'bottom right' of it's original position.

What exactly is happening here? Is there a reason these movements aren't being cancelled out? Here's the same code on JSFiddle, along with the output.

div.relative {  
  position: relative;  
  top: 30px;  
  right: 30px;  
  bottom: 30px;  
  left: 30px;  
  border: 3px solid 
# 73AD21;  
}

position: relative;
  
An element with position: relative; is positioned relative to its normal position:
  
This div element has position: relative;
  
abcd

web-tiki

101k33 gold badges218 silver badges250 bronze badges

asked Jan 3, 2017 at 10:19

0

First of all, the statements 1,2,3 and 4 are false because you can specify negative values for top, right left and bottom. So top/bottom move the element on the X axis and Left/right can move it on the Y axis.

Second, you can read for relative positionning :

If neither 'left' nor 'right' is 'auto', the position is over-constrained, and one of them has to be ignored. If the 'direction' property of the containing block is 'ltr', the value of 'left' wins and 'right' becomes -'left'. [...] [source: ]

This means that the left property takes precedence over the right property in the defautl direction (ltr). It is the same for top and bottom with top taking precedence over bottom.

answered Jan 3, 2017 at 10:27

web-tikiweb-tiki

101k33 gold badges218 silver badges250 bronze badges

For relatively positioned elements, the top property sets the top edge of an element to a unit above/below its normal position.

The problem is that the top is taking the div, and the bottom is including the

position: relative;
  
An element with position: relative; is positioned relative to its normal position:
  
This div element has position: relative;
  
abcd

1 and the

position: relative;
  
An element with position: relative; is positioned relative to its normal position:
  
This div element has position: relative;
  
abcd

2.

answered Jan 3, 2017 at 10:24

El0dinEl0din

3,3003 gold badges20 silver badges31 bronze badges

0

Well, it takes the last parameter given in horizontal and vertical position. So in your case it is "bottom" and "left".