Абсолютное положение по абсолютной позиции CSS

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

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

|

| знак здесь |

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

| знак in |

| знак здесь |

Это мой 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 для знака в коробке:

signinbox {цвет фона: # C1DEEE; прокладка: 10px; Z-индекс: 1; позиция: абсолютная; топ: 66px; }

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

Благодаря

источник

2009-08-13 j82374823749

вы можете добавить HTML-разметку для раздела? Это позволит легко ответить на ваш вопрос. – jkelley

Спасибо, я добавил его к своему оригинальному сообщению. – j82374823749

Оберните информация зарегистрировались в другой DIV и вызова это внутреннее значение означает, что относительно абсолютного позиционированного 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; 
}

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

источник

2009-08-13 22:42:01

Я попробую. – j82374823749

Только что понял, мне нужно использовать абсолютный, чтобы он плавал над другими элементами. – j82374823749

также попробуйте изменить свою позицию: абсолютный в CSS для родственника. Игра с этим немного может быть сложной, но вы получите ее с небольшим терпением. –

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

поплавок: правый

или

выравнивания текста: право

источник

2009-08-13 22:41:22 Unknown

Спасибо, но поплавок или выравнивание текста не сработали. – j82374823749

Вставьте элемент входа в div, содержащий кнопку входа.

Сделать положение контейнера относительно.

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

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

источник

2009-08-13 22:45:13 Eevee

Спасибо, я планировал иметь тег noscript с альтернативой. Возможно также, чтобы сайт выглядел красиво для людей с javascript :) – j82374823749

Я создал новый div с классом «main-pane». Вы можете отрегулировать положение «signinbox». из css, изменив значение «right» и «top».

<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; 
}

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

источник

2011-09-27 06:06:05

Абсолютное положение по абсолютной позиции CSS

ответ

Смежные вопросы