Element With Attachment

Problems:

Some elements has an attachment element. This attachment can show and hide. When it is shown, it should be on the top But it won't affect the position of the elements afterwards.

For example our fancy select. When it is clicked, the dropdown list will toggle to let you select one option.

 

Solution:

We put the element in a blocked wrapper (the fancy-select div). It has an fixed height. The attachment element is placed after the element with a relative position. The attachment should have the biggest index to show on top.

 

        .fancy-select {
            height: 26px;
            line-height: 26px;
            background-color: #FFFFFF;
        }

        .current-selection {
            height: 26px;
            line-height: 26px;
            border: 1px solid #DDDDDD;
            display: block;
            text-decoration: none;
        }

        .dropdown-list {
            border: 1px solid #DDDDDD;
            z-index: 99999;
            background-color: #FFFFFF;
            position: relative; /*Important,otherwise this div can not show on top. Also, we can move this element one px up */
            top: -2px;
        }

 

Try it with jsfiddle