CSS - 겹치는 div 위치 지정

-3

다음 레이아웃을 만들어야합니다. 사이트의 모든 내용을 담고있는 컨테이너가 있으며 브라우저 창에서 컨테이너의 중앙에 위치해야합니다. 콘테이너는 콘텐트와 함께 확장해야하므로 고정되지 않은 높이를 갖는다. 컨테이너 안에는 실제 페이지 내용을 담고있는 다른 div가 있습니다.CSS - 겹치는 div 위치 지정

내 문제는, 아주 특별한 테두리가 될 것이므로 컨테이너 div의 왼쪽 테두리와 겹치는 특수 div가 필요합니다 (CSS 테두리 속성 중 하나를 사용하지 않는 것이 좋습니다).

Javascript로 중복되는 div의 높이를 변경하는 것이 좋으며 (나와 방법을 보여줄 필요가 없음). 하지만 html과 css에서만 포지셔닝을하고 싶습니다. 나는 모든 제안에 대해 매우 감사 할 것입니다.

출처

2014-09-30 jimutt

지금까지 작성한 코드를 게시하고 http://jsfiddle.net과 같은 웹 사이트에서 해당 코드의 데모를 작성하면 더 빨리 도움을 얻을 수 있습니다. – Arbel

코드를 표시하십시오. 지금까지 가지고있다. 또한 국경으로 렌더링 할 수없는 국경을 특별하게 설명하십시오. –

Div는 배경이 아닙니까? – Foxsk8

지루되었다 참조의 컨테이너를 만드는, 그래서 Heres는, 연습 할 DEMO

<div id="container"> 
    <div id="content"> 
    <p> Hey I am the content</p> 
     <p> Hey I am the content</p> 
      <p> Hey I am the content</p> 
      <p> Hey I am the content</p> 
      <p> Hey I am the content</p> 
      <p> Hey I am the content</p> 
      <p> Hey I am the content</p> 
    </div> 
    <div id="special"> 

    </div> 

</div> 

#container {background: orange; 
width:50%; 
margin:0 auto; 
padding: 10px 30px; 
position:relative} 

#content { background: brown} 

#special {position:absolute; 
    top:0; 
    left: -30px; 
    width: 60px; 
    background: red; 
} 


var height= $("#container").css("height"); 
height = height.replace("px",""); 
height = parseInt(height) + 20; 

$("#special").css("height",height);

결정

출처

2014-09-30 20:45:06 Charles

고마워요! 그것은 내가 시도한 것과 아주 비슷합니다. 왜 내 코드가 작동하지 않는지 모르겠다. 그러나 나는 그것을 지금 일하게 할 수 있어야합니다. – jimutt

충분하지 않은 정보 ..하지만 어쩌면이 같은 ...

#overlap_div{ 
    position:absolute; z-index:9; left:0px, top: 0px; 
}

및 position:relative

출처

2014-09-30 20:28:16 jpganz18

CSS - 겹치는 div 위치 지정

답변

관련 문제