CSS позиционирует абсолютные элементы, заставляющие элементы складываться, когда они не нужны - PullRequest
Новая
       1

CSS позиционирует абсолютные элементы, заставляющие элементы складываться, когда они не нужны

0 голосов
/ 16 февраля 2012

Я собрал простой набор фотографий, используя CSS3 и JQuery. Он прекрасно работает, но есть одна серьезная проблема. На сайте должно отображаться несколько стеков, непредсказуемая сумма из-за стеков, используемых для отображения «Фотогалереи» на веб-сайте, и, очевидно, чем больше галерей, тем больше стеков.

Без стеков это просто, просто отобразите тег с src, извлекаемым из БД. Это все еще просто при использовании стеков, так как единственное отличие - небольшой кусочек CSS и JQuery.

Теперь для решения проблемы, я использовал абсолютное позиционирование, чтобы три изображения в стеке могли быть сложены. Это хорошо, но теперь, когда стеки отражаются, это складывает стеки, Ух! Таким образом, все, что я заканчиваю, это один огромный стек изображений, а не отдельные стопки по три изображения на кусочек.

Вот код. 

<html>
<head>

    <style type="text/css">

        #content {
            margin: 0 auto;
            width:  1024px;
        }

        #viewAlbumTitle {
            font-size: 20px;

        }

        #grid {

            line-height:          0;
            -webkit-column-count: 4;
            -webkit-column-gap:   10px;
            -moz-column-count:    4;
            -moz-column-gap:      10px;
            column-count:         4;
            column-gap:           10px;
        }

        #grid img {
            width:         100% !important;
            height:        auto !important;
            margin-bottom: 10px;
            padding:       5px;
            cursor:        pointer;
        }

        @media (max-width: 480px) {

            #grid {
                -moz-column-count:    2;
                -webkit-column-count: 2;
                column-count:         2;
            }
        }

        @media (max-width: 320px) {
            #grid {
                -moz-column-count:    1;
                -webkit-column-count: 1;
                column-count:         1;
            }
        }

        .pv-div {
            padding: 0 0 4px 0;
        }

        .pv-link {
            font-size:       15px;
            color:           #000;
            text-decoration: none;
        }

        .pv-link:hover {
            text-decoration: underline;
        }

        .thumb-over:hover {

        }

            /* image stsck */

        .image_stack {
            position: absolute;
        }

        .image_stack img {
            position:           absolute;
            border:             4px solid #FFF;
            box-shadow:         2px 2px 8px rgba(0, 0, 0, 0.5);
            -moz-box-shadow:    2px 2px 8px rgba(0, 0, 0, 0.5);
            -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
            z-index:            9999;
            -moz-transition:    all 0.2s ease;
            -webkit-transition: all 0.2s ease;
            -o-transition:      all 0.2s ease;
            transition:         all 0.2s ease;
        }

        .image_stack #photo1 {
            top:  8px;
            left: 108px;
        }

        .image_stack #photo2 {
            top:  6px;
            left: 104px;
        }

        .image_stack #photo3 {
            top:   4px;
            left:  100px;
            right: 100px;
        }

        .image_stack .rotate1 {
            -webkit-transform: rotate(15deg);
            -moz-transform:    rotate(15deg);
            transform:         rotate(15deg);
            -ms-transform:     rotate(15deg);
            -o-transform:      rotate(15deg);
        }

        .image_stack .rotate2 {
            -webkit-transform: rotate(0deg);
            -moz-transform:    rotate(0deg);
            transform:         rotate(0deg);
            -ms-transform:     rotate(0deg);
            -o-transform:      rotate(0deg);
        }

        .image_stack .rotate3 {
            -webkit-transform: rotate(-15deg);
            -moz-transform:    rotate(-15deg);
            transform:         rotate(-15deg);
            -ms-transform:     rotate(-15deg);
            -o-transform:      rotate(-15deg);
            cursor:            pointer;
        }

        .stack_wrap {
            margin-left: -100px;

        }


    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type="text/javascript">


        $(document).ready(function () {
            $(".image_stack").delegate('img', 'mouseenter', function () {
                if ($(this).hasClass('stackphotos')) {//


                    var $parent = $(this).parent();
                    $parent.find('img#photo1').addClass('rotate1');
                    $parent.find('img#photo2').addClass('rotate2');
                    $parent.find('img#photo3').addClass('rotate3');
                    $parent.find('img#photo1').css("left", "150px");
                    $parent.find('img#photo3').css("left", "50px");


                }
            })
                .delegate('img', 'mouseleave', function () {
                    $('img#photo1').removeClass('rotate1');
                    $('img#photo2').removeClass('rotate2');
                    $('img#photo3').removeClass('rotate3');
                    $('img#photo1').css("left", "");
                    $('img#photo3').css("left", "");

                });
            ;
        });

    </script>

</head>
<body>

<!-- header -->
{include file="header.tpl"}
<!-- header end -->

<div id="content">

    <div style="margin:42px 0 0 -15px;">

        <div style="float:left; width:192px; padding:30px 24px 0 0;">
            <div>
                <span style="font-size:20px;">Username's photos</span>

                <div style="padding:10px 0 10px 0;"><img src="img/avatar.png" width="192"/></div>
                <div class="pv-div"><a class="pv-link" href="">Edit photo's</a></div>
                <div class="pv-div"><a class="pv-link" href="">Edit album</a></div>
                <div class="pv-div"><a class="pv-link" href="">Delete</a></div>
            </div>


        </div>


        <div style="float:left; border-left:1px solid #ebebeb; width:795px; min-height:400px; padding:32px 0 0 24px;">
            <!--<span>You currently have no pictures, why not upload some now?</span>-->

            <div>
                <span id="viewAlbumTitle">Username's photo albums</span>

                <div style="float:right"><a href="" class="main-button" onClick=('popUpload') style="margin:0;">upload
                    new pics</a></div>
            </div>

            <div style="margin:20px 0 0 0"></div>

            <div>

                <div style="margin:10px 0 0 0"></div>

                <div id="grid">

                    <div class="stack_wrap" style="float:left;">
                        <div class="image_stack" style="postion:relative;">
                            <img id="photo1" class="stackphotos" src="img/avatar.png">
                            <img id="photo2" class="stackphotos" src="img/avatar.png">
                            <img id="photo3" class="stackphotos" src="img/avatar.png">
                        </div>

                        <div class="image_stack" style="postion:relative;">
                            <img id="photo1" class="stackphotos" src="img/avatar.png">
                            <img id="photo2" class="stackphotos" src="img/avatar.png">
                            <img id="photo3" class="stackphotos" src="img/avatar.png">
                        </div>
                    </div>


                </div>


            </div>
        </div>
    </div>

    <div style="width:100%; padding:10px 0 20px 0;">

    </div>

</body>
</html>
​

Если кто-нибудь сможет мне помочь, это будет очень цениться.

Заранее спасибо.

Джейми

Ответы [ 4 ]

0 голосов
/ 26 октября 2014

Я проверил код и установил position:relative на image_stack класс работал.Примечание: не забудьте добавить !important

.image_stack{position:relative !important}

, вы также можете установить z-index

0 голосов
/ 16 февраля 2012

Вы не хотите, чтобы позиция: абсолютная для контейнера. 

.image_stack { 
     position:absolute;   // this is wrong
}

для каждого image_stack, который является позицией: абсолютный, каждый стек будет продолжать накладываться друг на друга. Это связано с тем, что position: absolute применяется к родительскому контейнеру, где начинается ось по умолчанию 0 0.

Вот что должен прочитать ваш CSS: 

.image_stack { 
     position:relative;  
}
.stackphotos{
   position:absolute;
}
0 голосов
/ 16 февраля 2012

Поместите каждую стопку из трех изображений в отдельный контейнерный элемент: 

<div class="grid">
    <div class="stack">
        <img src="img1" />
        <img src="img2" />
        <img src="img3" />
    </div>
</div>

Установите стопки так, чтобы они плавали влево: 

.stack {
    float: left;
}

Установите изображения внутри стопки как абсолютнопозиционируется: .stack img {position: absolute;слева: 0;верх: 0;}

Используйте jQuery для смещения каждого изображения, если вам нужно увидеть, что в стеке более 1 изображения: 

$(document).ready(function() {
    $(".stack img").each(function(i, element) {
        var sibling = element.previousSibling;

        var top = 0;
        var left = 0;

        if (sibling) {
            top = $(sibling).position().top;
            left = $(sibling).position().left;
        }

        top += 5;
        left += 5;

        $(element).css("left", left);
        $(element).css("top", top);
    });
});
0 голосов
/ 16 февраля 2012

Установить верхнюю позицию второго стека. 

<div class="image_stack" style="postion:relative;top:200px">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...