Как отобразить текст за пределами поля <div></div>

Question

 <div class="signup">
    <div>Tenxian アカウントに必要な情報</div><br/>
    </div>
      <br/><br/><br/><br/><br/><br/>

     <div align="center">@2009 Tenxian      &nbsp;&nbsp;利用規約
    </div><br/>
    <div align="center"><a href="/en/bidding/index.php">Tenxian·English</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="/cn/bid/index.php">腾闲·中国</a></div><br/><br/>

Код .signup:

.signup {
    border: 1px solid #99CCFF;
    position: absolute;
    width: 700px;
    height:450px;
    left: 50px;
    right: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;

}

Проблема в том, что

@ 2009 Tenxian 利用 規約

Tenxian · Английский 腾 闲 · 中国

отображается в поле <div class="signup"></div>, как вывести его из поля <div class="signup"></div>?

Я хочу отобразить

@ 2009 Tenxian 利用 規約

Tenxian · Английский 腾 闲 · 中国

внизу веб-страницы и за пределами поля <div class="signup"></div>. Как это сделать?

 <div style="position:relative"><div align="center" >@2009 Tenxian      &nbsp;&nbsp;利用規約
</div><br/>
<div align="center"><a href="/en/bidding/index.php">Tenxian·English</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="/cn/bid/index.php">腾闲·中国</a></div><br/><br/>

</div>

не работает.

Answer 1

Проблема в том, что ваш ящик регистрации установлен на position:absolute. Когда вы делаете это, элемент удаляется из потока страницы.

Самое простое решение - просто не делать это position:absolute. (Если это невозможно, пожалуйста, измените свой вопрос, чтобы можно было публиковать более полезные ответы.)

Ваш оригинальный код, упрощенный

<div class="signup">
  <div>Tenxian アカウントに必要な情報</div>
</div>

<div class="footer">@2009 Tenxian 利用規約</div>
<div class="footer"><a href="/en/bidding/index.php">Tenxian·English</a> <a href="/cn/bid/index.php">腾闲·中国</a></div>

---

.footer {
  text-align: center;
}

---

Обратите внимание, что мое решение ниже НЕ требует от вас использования этого кода. Он отлично работает с вашей существующей HTML-разметкой. Я публикую этот код, чтобы будущие читатели могли легче понять разметку.

Возможное решение

.signup {
  border: 1px solid #99CCFF;
  width: 700px;
  height: 450px;
  margin-left: 50px;
  margin-right: auto;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
}

Это позволяет вашему регистрационному ящику занимать необходимое количество места в потоке страницы. Вот изменения:

• Удалить position:absolute: это заставляет поле регистрации отображаться как обычное статически расположенное поле
• Вместо left и right на margin вместо этого: когда блок уровня блока отображается статически, на него не влияют top, left и т. Д. Вместо этого мы используем поля, чтобы переместить поле туда, где мы хотим, чтобы оно было.

Answer 2

{overflow:visible;} может работать