设置文本位置 - 顶部：

Question

如何根据屏幕高度动态设置文本的位置。

#txt{
       position: absolute;
       top: 685px;
    }

    html,body {
        margin:0;
        padding:0;
    }


    #pic
    {
       width: 100%;
    }

    <image src="https://vignette.wikia.nocookie.net/uncyclopedia/images/4/47/Horiz-line.JPG/revision/latest/scale-to-width-down/600?cb=20050929041542" id="pic"></image>

    <div id="txt">
    Hello world
    </div>

目标是在所有浏览器尺寸的水平线上方生成文本hello world。 我的尝试在全屏窗口上itemgetter上运行，但在此处运行时失败。

Answer 1

为什么不在图像前显示文字？如果你需要它靠近直线，假设线条位于600x600px图像的中心，那么你可以将它相对于图像的顶部相对位置定位：

        <?php
            // Upcoming Events & Events Underday
            $now = date('Y-m-d H:i:s');

            $args = array(
                    'post_type'         => 'events_post_type',
                    'posts_per_page'    => -1,
                    'meta_query'        => array(
                            'relation'      => 'OR',
                            'date_upcoming_clause'   => array(
                                    'key'       => 'event_start_date',
                                    'compare'   => '>=',
                                    'value'     => $now,
                                    'type'      => 'DATETIME'
                            ),
                            array(
                                    'relation'      => 'AND',
                                    'date_started_clause'   => array(
                                            'key'       => 'event_start_date',
                                            'compare'   => '<=',
                                            'value'     => $now,
                                            'type'      => 'DATETIME'
                                    ),
                                    'date_end_clause'   => array(
                                            'key'       => 'event_end_date',
                                            'compare'   => '>=',
                                            'value'     => $now,
                                            'type'      => 'DATETIME'
                                    ),
                            ),
                    ),
                    'orderby' => array(
                            'date_started_clause' => 'ASC',
                            'date_end_clause' => 'ASC',
                            'date_upcoming_clause' => 'ASC',
                    ),
            );

            $the_query = new WP_Query($args);

    ?>

html,
body {
  margin: 0;
  padding: 0;
}

#wrapper {
  position: relative;
}

#txt {
  position: absolute;
  top: 50%;                      /* position of text set to half */
  transform: translateY(-100%);  /* just moving the text div a bit back */
}

#pic {
  width: 100%;
}

编辑：<div id="wrapper"> <div id="txt">Hello world</div> <img src="https://vignette.wikia.nocookie.net/uncyclopedia/images/4/47/Horiz-line.JPG/revision/latest/scale-to-width-down/600?cb=20050929041542" id="pic"> </div>包含img。可以使用图像高度的百分比来设置文本的位置。