이 버튼을 올바르게 배치하려면 어떻게해야합니까?

Question

버튼을 배치하려고합니다. 절대 위치로 설정 했으므로 위치를 올바르게 배치하는 방법을 알 수 없습니다.

'이 제품이 맞습니까?'라는 버튼이 있습니다. 나는 그것이 모든 주위를 잘 5px 간격으로 오른쪽 사이드 바에 위젯의 상단에 배치 할 (제거)

:

여기에 예를 참조하십시오. 어떻게해야합니까?

나는 원래 여기에서 버튼을했다 : http://cssdeck.com/t/uHhhprW6

이 도움을 주셔서 감사합니다.

Answer 1

가장 빠른 방법은 .email 규칙에서 top, left, float 및 margin-left 선언을 제거하고 positionrelative에 변경했다. 절대 위치를 많이 포함하는 요소와 아이들과 함께 계속있을 것 같습니다 -

.email { 
position: relative; /* not absolute */ 
width: 220px; 
height: 30px; 
font: .75em "lucida grande", arial, sans-serif; 
margin: 0 0 5px 0; 
} 

나는이 특정 버튼을 훨씬 청소기/간단한 방법이 있습니다 상상할 것입니다. 그러나 내가 제안한 변경 사항은 빠른 수정으로 작동하는 것 같습니다.

Answer 2

당신이 그것을 할 수 있도록 Button가 같은 장소에 항상있을 것입니다 경우 :

​.but { 
    position: absolute; 
    width: 80px; 
    height: 25px; 
    background-color: #DEDEDE; 
    right: 0; 
    margin: 5px; 
}​ 

을 그리고 그냥 편집하여 right 또는 당신이 원하는대로 top. 당신이 버튼을 position: absolute를 사용하는 경우 little example

Answer 3

, 당신은이 top, right, bottom 및 left 속성을 사용하여 위치를 지정할 수 있습니다. 방금 요소를 원하는 경우

#button { 
    position: absolute; 
    top: 5px; 
    bottom: 5px; 
} 

예를 들어, 상단과 오른쪽에 두 간격 5px로, 페이지의 오른쪽 상단에 ID button와 요소의 위치를, 당신은이 CSS 코드를 사용할 수 있습니다 상위 요소의 오른쪽으로 이동하려면 float: right을 사용해야합니다. 그런 다음 margin-top, margin-right, margin-bottom 및 margin-left을 사용하여 요소 주변에 여백이 있는지 확인할 수 있습니다.

차이점은 내 example Fiddle을 참조하십시오. 두 버튼 모두 HTML 코드에서 같은 div 안에 있지만 절대 위치에있는 것은 해당 블록 외부에있는 것처럼 보입니다.

CSS 위치 지정에 대한 자세한 내용은 this article을 참조하십시오. 요소가 position: absolute가있는 경우

Answer 4

, 당신은 left, right, top 및 bottom를 사용하여 위치해야합니다. 이 속성에서 사용하는 값은 가장 가까운 위치에있는 상위 항목 (공백이 아닌 position 값 또는 static 인 위치에있는 요소)과 관련되어야합니다.

<div id="container"> 
    <div id="position_me"></div> 
</div> 

그리고 다음 CSS :

#container { 
    width: 500px; 
    height: 500px; 
    position: relative; 
    border: 1px solid green; 
} 
#position_me { 
    width: 20px; 
    height: 20px; 
    position: absolute; 
    left: 100px; 
    top: 100px; 
    border: 1px solid red; 
} 

빨간색 상자는 컨테이너의 상단 국경에서 100 픽셀 될 것이며, 100 픽셀에서

예를 들어, 다음과 같은 HTML, 고려 컨테이너의 왼쪽의 경계.

working example을 참조하십시오.나는 일에 그것을 얻을 수