Css 我能'；t在WordPress站点中添加边距以定位粘性

我想将包含粘性

的左侧边栏从上到下移动，因为在向下滚动时，它会从下到主
标题

但是，我不能在col-sm-1下的
margin
top添加到sticky top


.col-sm-1.粘性顶部{页边距顶部：50px}

50px
不重要。长度应足以将
div
移动到标题下方

页面的代码：

<?php get_header(); ?>
<div class="container-fluid">
    <!-- Control the column width, and how they should appear on different devices -->
    <div class="row">
        <div class="col-sm-10" >50%
            <main role="main">
                <!-- section -->
                <section>
                    <?php if (have_posts()): while (have_posts()) : the_post(); ?>
                        <!-- article -->
                        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                            <!-- post thumbnail -->
                            <?php if ( has_post_thumbnail()) : // Check if Thumbnail exists ?>
                                <!-- <a href="<?php //the_permalink(); ?>" title="<?php //the_title(); ?>"> -->
                                <?php the_post_thumbnail(); // Fullsize image for the single post ?>
                                </a>
                            <?php endif; ?>
                            <!-- /post thumbnail -->
                            <!-- post title -->
                            <h1>
                                <!--    <a href="<?php //the_permalink(); ?>" title="<?php //the_title(); ?>"><?php //the_title(); ?></a>-->
                            </h1>
                            <!-- /post title -->
                            <div class="row">
                                <div class="col-sm-1 " >50%
                                    <?php global $post; ?>
                                    <style>
                                        .logo-img2{
                                        border: 1px solid #d0d0ff;padding:20px; margin-top: 0px; margin-bottom: 0px;
                                        }
                                    </style>
                                    <style>
.col-sm-1 .sticky-top { margin-top: 50px}
                                    </style>
                                    <div class="sticky-top ">
                                        <a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo get_permalink($post->ID);?>">
                                        <div>
                                            <img  src="<?php echo get_template_directory_uri(); ?>/img/icons/facebook.png" alt="Logo" class="logo-img2"">
                                        </div>
                                    </a>
                                    <a href="https://twitter.com/share?url=<?php echo get_permalink($post->ID);?>">
                                        <div>
                                            <img  src="<?php echo get_template_directory_uri(); ?>/img/icons/twitter.png" alt="Logo" class="logo-img2"">
                                        </div>
                                    </a>
                                    <?php $pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>
                                    <a href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&media=<?php echo $pinterestimage[0]; ?>&description=<?php the_title(); ?>">
                                        <div>
                                            <img  src="<?php echo get_template_directory_uri(); ?>/img/icons/pinterest.png" alt="Logo" class="logo-img2" >
                                        </div>
                                    </a>
                                        <div class=" logo-img2" style="padding: 0px; text-align: center">
                                            <ul class="list-inline">
                                                <li class="list-inline-item">
                                                    <a href="#" data-toggle="tooltip" title="Default tooltip">Tooltip</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-11" >
                            <!-- post details -->
                            <span class="date"><?php the_time('F j, Y'); ?> <?php the_time('g:i a'); ?></span>
                            <span class="author"><?php _e( 'Published by', 'html5blank' ); ?> <?php the_author_posts_link(); ?></span>
                            <span class="comments"><?php if (comments_open( get_the_ID() ) ) comments_popup_link( __( 'Leave your thoughts', 'html5blank' ), __( '1 Comment', 'html5blank' ), __( '% Comments', 'html5blank' )); ?></span>
                            <!-- /post details -->
                            <?php the_content(); // Dynamic Content ?>
                            <?php the_tags( __( 'Tags: ', 'html5blank' ), ', ', '<br>'); // Separated by commas with a line break at the end ?>
                            <p><?php _e( 'Categorised in: ', 'html5blank' ); the_category(', '); // Separated by commas ?></p>
                            <p><?php _e( 'This post was written by ', 'html5blank' ); the_author(); ?></p>
                            <?php edit_post_link(); // Always handy to have Edit Post Links available ?>
                            <?php comments_template(); ?>
                                </div>
                        </article>
                        <!-- /article -->
                    <?php endwhile; ?>
                    <?php else: ?>
                        <!-- article -->
                        <article>
                            <h1><?php _e( 'Sorry, nothing to display.', 'html5blank' ); ?></h1>
                        </article>
                        <!-- /article -->
                    <?php endif; ?>
                </section>
                <!-- /section -->
            </main>
        </div>
        <div class="col-md-2" style="background-color:orange;height: 100%; width: 100%;">50%
            <?php get_sidebar(); ?>
        </div>
    </div>
</div>
<?php get_footer(); ?>


50%
50%
.logo-img2{
边框：1px实心#d0d0ff；填充：20px；页边距顶部：0px；页边距底部：0px；
}
.col-sm-1.粘性顶部{页边距顶部：50px}






欢迎来到SO

由于您有位置
sticky
，因此您需要
top
值来移动它，就像您的案例集
top:60px
中那样，而不是
margin

静态或相对与绝对或固定之间的主要区别
是它们在DOM流中占用的空间。静态位置&
相对保持其自然空间在文档流中，而
绝对和固定不允许-他们的空间被移除，他们有一个
浮动行为


使用默认框架类来定位任何类/使其成为选择器也是不好的

.col-sm-1 .sticky-top {
    /* margin-top: 50px; */
    top: 60px;
}