CSS Создание панели вкладок

Я создаю панель вкладок, где нажатие соответствующей кнопки вкладки (например, веб-браузеры) показывает соответствующие элементы, изменяя свойство видимости каждого из элементов. Но элементы не отображаются прямо под панелью, они выглядят сдвинутыми вниз, если это не первая кнопка. Это связано с тем, что видимость не влияет на макет, и элементы записываются один за другим. Я хочу, чтобы все они были наверху. Я не могу удалить их, потому что у них есть свойства javascript, и я не могу утверждать их абсолютную, без того, чтобы они не могли заполнить свой контейнер w/h 100%. Как вы это сделаете

HTML

<tab-view id="tabView">
                <tab-bar></tab-bar>

                <tab-content>
                    <!-- First tab-content will show on page load -->
                    <tab-item data-title="Meat Pizzas">
                        <circular-view id="exampleView" data-object-class="exampleObject" data-autoloop-interval="1000 ">
                            <circular-object data-icon="Resources/ExamplePizza.png">0</circular-object>
                            <circular-object data-icon="Resources/ExamplePizza.png">1</circular-object>
                            <circular-object data-icon="Resources/ExamplePizza.png">2</circular-object>
                            <circular-object data-icon="Resources/ExamplePizza.png">3</circular-object>
                            <circular-object data-icon="Resources/ExamplePizza.png">4</circular-object>
                            <circular-object data-icon="Resources/ExamplePizza.png">5</circular-object>
                            <circular-object data-icon="Resources/ExamplePizza.png">6</circular-object>
                            <circular-object data-icon="Resources/ExamplePizza.png">7</circular-object>
                            <circular-object data-icon="Resources/ExamplePizza.png">8</circular-object>
                            <circular-object data-icon="Resources/ExamplePizza.png">9</circular-object>
                            <circular-object data-icon="Resources/ExamplePizza.png">10</circular-object>
                            <!-- Last object in the list is the
                first to be featured on page load -->
                        </circular-view>
                    </tab-item>

                    <tab-item data-title="Second Thing">
                        <div style="width:100%; height:100%; background-color:gray;">
                            hi
                        </div>
                    </tab-item>

                    <tab-item data-title="Third Thing">
                        <div style="width:100%; height:100%; background-color:gray;">
                            hi
                        </div>
                    </tab-item>
                </tab-content>


            </tab-view>

Нажатие кнопки

tabViewToBe.tabButtonPressed = function (title) {
            //Deselect all except one that was clicked and show the right item
            for (var a in tabViewToBe.bar.buttons) {
                var wasClicked = $(tabViewToBe.bar.buttons[a]).html() == title,
                    b = tabViewToBe.bar.buttons[a];
                if (wasClicked === false) {
                    b.deselect();
                    $(tabViewToBe.items[a]).css("display", "none"); //Used to be visibility, I was messing around with stuff
                } else {
                    b.select();
                    $(tabViewToBe.items[a]).css("display", "block");
                }
            }
        };

Более детально:

К сожалению, проблема заключается в том, что при отображении у меня будет один из анимаций табуляции в зависимости от его размера. Но при display: none он не может получить размер, поэтому, когда я возвращаюсь назад, все объекты находятся в левом верхнем углу. Я не могу удалить объекты, и я не могу просто использовать видимость