wie man Kindelementabdeckung Grenze des Elternteils bildet?

Question

Hier ist eine Art grobes Bild von dem, was ich versuche zu tun. Wenn es das nicht gut genug erklärt, kann ich eine Geige zusammenschmeißen.

Die Black Box ist ein <div> und die rosafarbene auch divs. Was ich will, ist für sie zu sehen Art von wie Tabs. Wenn also einer aktiv ist, deckt er die Grenze des Elternteils ab und gibt den "Brückeneffekt", der in den Tabs wichtig ist.

Ich dachte, ich könnte den aktiven einfach etwas breiter machen, damit er die Grenze verdeckt. Das Problem ist, wenn ich overflow-x: hidden; habe, ist der breitere Teil "unter" der schwarzen Kontur und wenn ich Auto oder sichtbar mache, dann lässt es einfach scrollen.

Eine wichtige Sache: das Rosa muss relative Position haben.

Was mache ich falsch?

EDIT: vergessen, den wichtigsten Teil zu erwähnen. Die Blackbox hat overflow-y: hidden. Ohne es die Methoden unten funktionieren gut, aber wenn ich es hinzufüge, geht es zurück, wie es war

Answer 1

Vielleicht wird dieser Ansatz Ihnen helfen:

<div class="main"> 
    <div class="selected"><div></div></div> 
    <div><div></div></div> 
    <div><div></div></div> 
</div> 

und CSS:

.main {text-align: right;border: 10px solid #000;} 
.main > div > div {width: 100px; height: 60px; display: inline-block;background-color: red;margin: 10px 0;} 
.main > .selected > div {margin-right: -10px;padding-left: 10px;} 

jsFiddle Demo

Answer 2

Sie müssen nur eine Breite auf Ihrem Container div, und nicht overflow-x hidden; verwenden.

Hier ist ein Beispiel: http://jsfiddle.net/YhAmh/1/

Answer 3

Da Ihr bereits rosa divs position: relative haben, können Sie Offset nur die aktive, ein wenig nach rechts:

.activediv{ 
    left: 5px; 
} 

Answer 4

Wenn Sie position: absolute statt position: relative verwenden, können Sie erreichen das Layout mit overflow-y: hidden in der Eltern div.

Sie sehen das Ergebnis kann sich hier: http://jsfiddle.net/eugip9/sqjck/