CSS를 사용하여 다른 버튼 위에 위치 시키십시오.

Question

여기에 고급 CSS 도움말이 필요합니다. 로그인 버튼과 등록 버튼이 있습니다. 한 번에 하나씩 만 표시하고 싶습니다. 사용자가 로그인하지 않은 경우 등록 단추가 로그인 단추 위에 나타나야합니다. 우리는 복잡한 & 미친 백엔드 서버가 사용자가 로그인하지 않은 것으로 생각되면 등록 단추에 대한 코드를 생성합니다.하지만 둘 다 서버에 의해 출력됩니다, 사용자가 로그인되어있는 경우에만 등록 버튼. 아무것도 있습니까 절대 위치 지정으로 다른 것을 움직일 수 있습니까?

Answer 1

예, 있습니다.

.button1 { 
    position: absolute; 
    left: 100; 
    top: 100; 
    z-index: 1000; 
} 

.button2 { 
    position: absolute; 
    left: 100; 
    top:100; 
z-index: 1001; 
} 

그러나 나는 이것을하는 것을 싫어합니다. 한 가지만 들어, 마크 업의 자연스러운 흐름에서 당신을 제거하고, 어떤 내용이 위에 오는지에 상관없이 버튼을 배치하도록합니다. 다른 경우, 하단 버튼이 상단보다 큰 경우 어떻게해야합니까? 그런 다음 아래쪽 가장자리의 가장자리에 문제가 있습니다.

위의 Dominic의 솔루션을 사용하십시오. 훨씬 나아 졌어.

Answer 2

왜 다른 것을 위에 놓을까요? display 속성을 사용하여, CSS에 물건을 숨기는의 "적절한"방법이있다 :

.register_button { display: none; } 

그런 다음, HTML에서 :

이

<button type="button" class="register_button">Will not show up!</button> 

Answer 3

먼저 당신이 당신이 위치를 CSS에서 해당 ID를 사용할 필요가 firebug (파이어 폭스의 부가 기능)와 같은 도구를 사용하여 요소의 ID를 검사 할 필요가의 버튼이 ID myid, 당신은이 작업을 수행해야했다 가정하자 CSS :

#myid 
{ 
    position:absolute; 
    top:100px; /* adjust this */ 
    left:100px; /* adjust this */ 
}