Overflow-y affecting visibility of element within a container

I have a div with some content that has a negative position relative. I want the span's to appear above its container in the x-axis, but overflow-y is clipping my text. I need it to have a vertical scroller.

I don't want an horizontal scroll. I want a vertical scroll. The text should appear above the container.

How Can I do that?

<div id="test">
    <span class="row"> Text Text Text </span>   
    <span class="row"> Text Text Text </span>  
    <span class="row"> Text Text Text </span>   
</div>​


#test {
    height:100px;
    width:100px;
    clip: rect(auto,auto,auto,auto);
    overflow-y: auto;
}
.row {
    position:relative;
    left:-11px;
    display: block;
}​

http://jsfiddle.net/jZrER/ . Try removing overflow-y to see what happens. I need something like this: http://jsfiddle.net/e7MXD/ but with vertical scroll.

This is what I am trying to accomplish: The blue part is vertical scroller (I have no time to draw it).

Answers


I hope someone proves me wrong on this. I don't think it's possibly using overflow in css. I used overflow-x:visible;, and it seems the scroll bar has a built in crop function (after all, you wouldn't want content going over/under the scrollbar). There might be a clever way to replicate it however.

Edit: My 'proof' of this is if you put

overflow-x: visible; !important
overflow-y: auto;

it won't add scrolls, but if you remove !important it does.


Than use overflow-x: auto; as well, or better yet, omit both and use overflow: auto.


Still a little confused on what you're trying to achieve. I played around with this though.

http://jsfiddle.net/e7MXD/1/

<div id="test">
    <span class="row"> Text Text Text </span>   
    <span class="row"> Text Text Text </span> 
    <span class="row"> Text Text Text </span> 
    <span class="row"> Text Text Text </span> 
     <span class="row"> Text Text Text </span> 
     <span class="row"> Text Text Text </span> 
     <span class="row"> Text Text Text </span> 
</div>​​​​

#test {

    margin-left:50px;
    margin-top:50px;
    border:1px solid black;
    height:100px;
    width:100px;
}

.span-container {
    margin-left:50px;
    margin-top:50px;    
overflow-y:scroll; 
overflow-x:visible;  
height:100px;   
    width:200px
}

.row {
    position:relative;
    left:-11px;
    display: block;
}​

Need Your Help

Using JMockit with Tycho

java eclipse maven jmockit tycho

I have several Eclipse Plugin-Projects which I want to compile using Maven &amp; Tycho. The project can be found at github. There you see three projects with their pom.xml files. With that I aim to...

Logical order of Story XML in IDML

xml xml-serialization xml-parsing xmldocument idml

I am new to IDML and I am trying to understand this.