Question

Как сделать на сайте div-блок над другим? Хотелось бы реализовать вот это:

Answer 1

Примерно так, в шапку сайта добавить код:

<div class="us-login">
<?if($USER_LOGGED_IN$)?><a href="$PERSONAL_PAGE_LINK$">Профиль</a> | <a href="$LOGOUT_LINK$">Выйти</a>
<?else?>
<a href="$REGISTER_LINK$">Регистрация</a> | <a href="$LOGIN_LINK$">Войти</a>
<?endif?>
</div>

после в стили прописать что-то подобное:

.us-login {position:relative; top:0;z-index:10;}

добавить в шапку сайта, а после уже к этому классу писать стили, делать фон для кнопки и прочее, выравнивать итд.

Comments

Я это пробовал уже, когда прошаривал весь интернет. Конечно, не умеючи, но делал в точности то же самое. TOP:0 не выравнивает по верху страницы вовсе. Использовал и Z-INDEX, и POSITION. Попробовал и по-вашему (мало ли!) - всё равно... Взгляните сами. Код вообще ломает страницу.

---

Рустам Бегалиев,

Стили немного поправил, попробуйте вот так:

.us-login {position:absolute;top:5%;z-index:10;right:3%;}
.us-login a {background:green;padding:5px;border-radius:3px;color:#fff;}
.us-login a:hover {color:orange;}

---

Yuri_Geruk,

Как всегда, помогло! Ещё раз спасибо огромное! За огромную кучу вопросов и за то, что ответы на них и решение всех проблем отнимает уйму Вашего времени. Дальше справлюсь сам.

Этот комментарий предназначался Вам. Спасибо огромное.

---

Yuri_Geruk,

Простите, пожалуйста. Обнаружил, что при просмотре на планшете ссылки для входа / регистрации отображаются не как на компьютере, а в виде обчных ссылок под хидером. Как это было до применения стилей, о которых Вы написали последний раз....

---

Всё, теперь решено.

Answer 2

А так?

.us-login {
background: green;
position: absolute;
right: 200px;
top: 10px;
z-index: 10;
}

 

 Дальше сами стилизуйте.