Абсолютное выравнивание позиции CSS

StackOverflow https://stackoverflow.com/questions/1275014

  •  16-09-2019
  •  | 
  •  

Вопрос

У меня есть форма входа на мой веб-сайт, которая отображается, когда пользователь нажимает кнопку.Это div, который плавает поверх другого содержимого.Он занимает лишь небольшую часть страницы (непосредственно под ссылкой для входа).

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

|войдите в систему|

|войдите в систему здесь |

Я действительно хочу, чтобы это выглядело вот так (выровнять справа от ссылки входа):

                |войдите в систему|

|войдите в систему здесь |

Это мой HTML-код:

        <div class="clear">
            <a class="button" id="SignInBtn" href="#" onclick="toggleSignInBox(); return false;"><span id="spanSignIn">Sign In / Register <img src="../../Content/shared/arrow_down.png" border="0" /></span></a>
        </div>
        <div id="signinbox" style="display:none;">
            <p>Who would you like to sign in with?</p>
            <p>Google</p>
            <p>Yahoo</p>
            <p>Other</p>
        </div>

И CSS для поля входа в систему:

поле для входа {цвет фона:#C1DEEE;отступ: 10 пикселей;z-индекс:1;положение:абсолютный;верхний уровень: 66 пикселей;}

Возможно ли это сделать только в CSS?

Спасибо

Это было полезно?

Решение

Оберните информацию о входе внутрь другого div и назовите ее inner-signin, затем расположите ее относительно абсолютного внешнего div.Возможно, вам также придется установить ширину для абсолютного внешнего элемента div. 

div.inner-signinbox {
    position: relative;
    right: 20px;
}

signinbox {
    width: 250px; //ADD A WIDTH
    background-color:#C1DEEE; 
    padding:10px; 
    z-index:1; 
    position: absolute;
    top:66px; 
}

Если это не сработает, почему бы просто не добавить свойство "left" в поле подписи, чтобы установить горизонтальное положение так же, как и вертикальное.Есть ли причина, по которой вы не можете абсолютно расположить элемент с помощью x и y?

Другие советы

Я думаю, вы, возможно, захотите попробовать

плавать:правильно

или

выравнивание по тексту:правильно

Поместите данные для входа внутрь div, содержащего кнопку входа.

Установите контейнер в нужное положение:относительный.

Затем укажите позицию для входа в систему:абсолютный;и правильно:0;.

Кстати, будьте осторожны здесь;требовать Javascript просто для входа в систему довольно грубо.Многие люди запускают NoScript по разным причинам.

Я создал новый div с классом "главная панель".Вы можете настроить положение "ящика для входа".из css, изменив значения "справа" и "сверху".

<div class="main-pane">
  <div class="clear">
            <a class="button" id="SignInBtn" href="#" onclick="toggleSignInBox(); return false;">
                 <span id="spanSignIn">Sign In / Register <img src="../../Content/shared/arrow_down.png" border="0" /></span>
           </a>
  </div>
  <div id="signinbox" style="display:none;">
            <p>Who would you like to sign in with?</p>
            <p>Google</p>
            <p>Yahoo</p>
            <p>Other</p>
   </div>
</div>

.main-pane{
    position:relative;
}

#signinbox{
    width: 250px; 
    background-color:#C1DEEE; 
    padding:10px; 
    z-index:5; 
    position: absolute;
    top:66px;
    right:0px;  
}

Спасибо, Арун Кришнан

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top