how to put marquee div at the back of another none marquee div?


Tags: html,css

Problem :

I am trying to make div with inside marquee to put at the back of the div without marquee

I am having trouble in putting the marquee div at the back of the sphere div how can I do it using CSS ? I already put z-index :-9999; in a moving div but seems not working

here is my code

HTML

<body>
    <div id="container" >
        <div id="sphere" >
            <marquee>
            <div id="moving">

            </div>
            </marquee>
        </div>
    </div
</body>

CSS

#container{
    width:200px;
    height:100px;
    background-color:#000;

}
#sphere{
    width:100px;
    height:100px;
    border-radius:50px;
    background-color:#fff;
    opacity:0.6; // i reduce the opacity of the sphere so I can see the moving div at the back
    margin:auto;
    z-index:99999;
}
#moving{
    width:50px;
    height:50px;
    background-color:green;
    margin-top:25px;
    z-index:-999999;
}

to make things clear below image shows what I want to do enter image description here

basically I just want to put the moving div at the back of the sphere

Thanks in advance



Solution :

Add overflow: hidden; to #sphere.

#sphere {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background-color: #fff;
    opacity:0.6;
    overflow: hidden;
    margin: auto;
    z-index:99999;
}

CSS: overflow


    CSS Howto..

    Opacity on hover of parent is being transfered to submenu; how to prevent this using CSS

    How to get css hover values on click?

    How to override Zurb Foundation css properties using rails 3.1?

    How to change the order of columns in CSS template to put important content first?

    how to show like chat box for the div/p tag top left/right corners

    Achieved JS typewriter effect, can't figure out how to make it loop after last array item

    CSS - how not to scroll parts of the page? [closed]

    How to include a custom CSS file in TYPO3

    How can I make each section fit within the li box?

    How can I have multiple jQuery button styles on one page?

    How to set height of child div while hovering over a parent div in css?

    How to hide first 3 childs of UL using CSS

    How can I get the text style from window.selection()?

    IE8 Not showing divs with floats

    How to make content fill space inside
    tag in html?

    jQuery: how to avoid transparent effect on a mask div

    How to change list item color with JQuery

    How can I have an image float next to a centered div?

    How to generate regular CSS file from SASS?

    how to make background image stretch vertically

    how to ensure that each time a css class name changes from the previous, it is applied a specific style

    How to achieve pages like a math notebook in css?

    How can I center vertically a div in bootstrap?

    How to change a button data-icon size

    How to give a css code for combined classes in HTML [duplicate]

    JavaFX 8 - How to change the color of the prompt text of a NOT editable combobox via CSS?

    How do I properly inspect jquery and javascript using web developer tools?

    How to use -webkit-appearance: searchfield-results-decoration?

    Internet Explorer 10 menu item shows focus outline unexpectedly

    How to fade-in and fade-out background-image with CSS transition?