Wordpress shortcode always at top of page - wordpress

Question

I have the following shortcode that I am using to display a custom post on a page:
add_shortcode( 'page-section', 'page_section_shortcode' );
function page_section_shortcode( $atts ) {
global $post;
$post_slug=$post->post_name;
$a = shortcode_atts( array(
'post-name' => 'qwerty',
'bg-color' => 'white'
), $atts );
$post_slug=$post->post_name;
$post_name = $a['post-name'];
$query = new WP_Query( array(
'post_type' => 'page_section',
'name' => $post_name,
) );
if ( $query->have_posts() ) { ?>
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div style="background-color: <?php echo $a['bg-color']; ?>" id="<?php global $post; $post_slug=$post->post_name; echo $post_slug; ?>" class="page-section">
<div class="row">
<?php the_content(); ?>
</div>
</div>
<?php endwhile;
wp_reset_postdata(); ?>
<?php $myvariable = ob_get_clean();
return $myvariable;
}
}
Everything is working the way I want it to, I can set the content in my custom post and use a short code to pull that content into a page.
The problem is that the content that is pulled in with the short code is always at the top of the page. Using multiple shortcodes in a row they keep their order, but any other content on the page is displayed at the bottom (below all of the shortcode content).
I have tried removing the 'echo' as suggested in another stackoverflow post but cannot seem to find what I am doing wrong.

Answer 1

Replace your code to this code. This code returns generated html so it will not echo at the top of the page
add_shortcode( 'page-section', 'page_section_shortcode' );
function page_section_shortcode( $atts ) {
global $post;
$post_slug=$post->post_name;
$a = shortcode_atts( array(
'post-name' => 'qwerty',
'bg-color' => 'white'
), $atts );
$post_slug=$post->post_name;
$post_name = $a['post-name'];
$query = new WP_Query( array(
'post_type' => 'page_section',
'name' => $post_name,
) );
$returnhtml = '';
if ( $query->have_posts() ) {
while ( $query->have_posts() ) : $query->the_post();
global $post;
$returnhtml .= '<div style="background-color: '. $a['bg-color'].'" id="'.$post->post_name.'" class="page-section">';
$returnhtml .= '<div class="row">'.get_the_content().'</div>';
$returnhtml .= '</div>';
endwhile;
wp_reset_postdata();
return $returnhtml;
}
}

Answer 2

function header_notification()
{
echo '<div><strong>Any html goes here</strong></div>';
}
add_action('wp_head', 'header_notification');