엘리먼트가 '절대적으로'& '상대적으로'같은 시간에 동시에 배치되도록 어떻게 배치합니까? - CSS

Question

현재 구현 볼 수 있습니다 : 당신이 상자 # 1에있는 이름 중 하나를 클릭하면 http://jsfiddle.net/BMWZd/25/

, 당신은 상자의 왼쪽 상단 모서리에있는 원 아래로 이동하고 볼 수 있습니다.

어떻게 중지합니까? 또한 모든 브라우저 크기에서 각 상자의 왼쪽 상단에 표시되는지 확인하십시오.

그래서 position : absolute는 주변에서 일어나는 일과 상관없이 한 곳에서 계속됩니다. 그러나 브라우저 크기 차이에 대해 (상대적으로) 동일한 위치에 두지는 않습니다.

하지만 위치는 상대적입니다.

두 가지 모두에서 가장 좋은 점은 무엇입니까?

Answer 1

그래서 위치에 관계없이 발생하는 한 장소에 보관합니다 절대 그것 주위. 그러나 브라우저 크기 차이에 대해 (상대적으로) 동일한 위치에 두지는 않습니다.

reset file을 사용하는 경우 위치가 동일해야합니다. 적어도 이론적으로는.

내 경험에 의하면 대화식으로 크기를 변경하는 요소가있을 때 레이아웃에서 "놀라움"을 피하는 가장 좋은 방법은 위치를 지정하는 데 상자 모델을 사용하지 않고 크기를 변경하는 요소 주위에 모든 것을 갖는 것입니다 "절대적으로 자리 매김했다. TDS 농도 position:relative

float:left 및 CSS 클래스 #sit-in-corner에서 여백을 제거합니다

• : 귀하의 경우
  , 나는 TDS의 위치를 ​​만들 것, 그리고 모든 그들을 절대 위치 내부. 위치 절대 값으로 지정하고 top 및 left을 추가하여 위치를 지정합니다.

이제 동그라미 표시된 번호는 링크의 "영향을받지 않는"것이어야합니다. 당신은 내부 테이블을 원하는 곳에 배치 할 수 있지만 (마진 등) td 안에 위치 할 수도 있습니다.

EDIT - td가 크기가 변하는 내부의 물건에 이상하게 반응했기 때문에 문제가 발생했음을 알았습니다.

주로 div를 td 안에 넣고 td에서 'dashed-panel'클래스를 제거하고 div에 넣습니다. 또한 클래스 '대시 패널'을 위치 : 상대적으로 변경하고 위의 변경 사항을 적용합니다.

이 결과는 http://jsfiddle.net/BMWZd/30/

나는 모든 불필요한 물건을 제거 할 필요가에서 볼 수있는, 너무 많은 (?) HTML 너무 느린 jsfiddle했다.

Answer 2

나는 이것이 당신의 질문에 직접적으로 대답하지 않는다는 것을 알고있다. 그러나 나는 이것이 더 나은 해결책 접근법이 될 수 있다고 생각한다. 내가 틀렸다면 나를 바로 잡아주세요.

레이아웃을 한눈에 파악하고 너무 복잡합니다. 나는 당신이 그것을 단순화함으로써 이익을 얻을 것이라고 생각합니다.

다음은 내가 수행 한 간단한 예입니다. 솔직히, 나는 그것이 당신의 필요에 맞는지는 모르겠지만 아마 어떤면에서 유용 할 것입니다.

JS :

<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(function(){ 

    $('li').click(function(){ 
     $('.circle').removeClass('inactive').addClass('active'); 
     $('li').removeClass('big'); 
     $(this).addClass('big'); 
    }); 

    }) 
</script> 

작풍 :

<style> 
    li{ 
    cursor: pointer; 
    } 
    #super-container{ 
    width: 200px; 
    height: 200px; 
    background: #F2F2F2; 
    } 
    #circle-container{ 
    padding: 10px; 
    height:50px; 
    } 
    .circle{ 
    border: #FF0000; 
    width: 50px; 
    height: 50px; 
    } 
    .active{ 
    background: #AA0000; 
    } 
    .inactive{ 
    background: #330000; 
    } 
    .big{ 
    font-size: 2em; 
    } 
</style> 

마크 업 :

<div id="super-container"> 
    <div id="circle-container"> 
    <div class="circle inactive"></div> 
    </div> 
    <ul id="the-buttons"> 
    <li>Button 1</li> 
    <li>Button 2</li> 
    <li>Button 3</li> 
    <li>Button 4</li> 
    </ul> 
</div>