Geek asks and answers

How to make a child cover a parent border?

Here is a kind of rough picture of what I'm trying to do. If he doesn’t explain it well enough, I can throw the violin together.

enter image description here

The black box is <div>, and the pink ones are also a div. I want them to look like tabs. Therefore, when it is active, it closes the border of the parent, giving the effect of a "bridge", which is important for tabs.

I thought I could just make the active a little wider so that it cuts the border. The problem is that if I have overflow-x: hidden;, then the wider part is under the “black outline”, and if I do it automatically or visibly, it just allows it to scroll.

One important thing: pink must have a relative position.

What am I doing wrong?

EDIT: . overflow-y: hidden. , , ,

+5
4

, :

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

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

+4

div overflow-x hidden;.

: http://jsfiddle.net/YhAmh/1/

+4

div position: relative, :

.activediv{
    left: 5px;
}
+1

position: absolute position: relative, overflow-y: hidden div.

: http://jsfiddle.net/eugip9/sqjck/

0

More articles:


All Articles