how can i show numbers on the thumbnail of post

[silver7]

How can I numbered my site like this site? please help me.. 

 

and my index.php code 

<?php


get_header(); ?>

	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">

		<?php if ( have_posts() ) : ?>

			<?php /* Start the Loop */ ?>
			<?php while ( have_posts() ) : the_post(); ?>

				


<?php



$format = get_post_format();
$formats = get_theme_support( 'post-formats' );
$postclass = '';

if ( ! has_post_thumbnail() )
	$postclass = 'no-thumbnail';
?>

<article id="post-<?php the_ID(); ?>" <?php post_class( $postclass ); ?>>
	<div class="entry-thumbnail">
		<a href="<?php the_permalink(); ?>" title="<?php echo the_title_attribute(); ?>">
			<?php if ( has_post_thumbnail() ) : ?>
				<?php the_post_thumbnail( 'pictorico-home' ); ?>
			<?php endif; ?>
		</a>
	</div>
	<header class="entry-header">
		<?php if ( 'post' == get_post_type() ) : ?>
		<div class="entry-meta">
			<?php pictorico_date(); ?>
		</div><!-- .entry-meta -->
		<?php if ( $format && in_array( $format, $formats[0] ) ): ?>
			<a class="entry-format" href="<?php echo esc_url( get_post_format_link( $format ) ); ?>" title="<?php echo esc_attr( sprintf( __( 'All %s posts', 'pictorico' ), get_post_format_string( $format ) ) ); ?>"><span class="screen-reader-text"><?php echo get_post_format_string( $format ); ?></span></a>
		<?php endif; ?>
		<?php endif; ?>
		<?php if ( 'link' == $format ) : ?>
			<?php the_title( '<h1 class="entry-title"><a href="' . esc_url( pictorico_get_link_url() ) . '" rel="bookmark">', '</a></h1>' ); ?>
		<?php else : ?>
			<?php the_title( '<h1 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h1>' ); ?>
		<?php endif; ?>
	</header><!-- .entry-header -->

	<footer class="entry-footer">
		<?php edit_post_link( __( 'Edit', 'pictorico' ), '<span class="edit-link">', '</span>' ); ?>
	</footer><!-- .entry-footer -->
</article><!-- #post-## -->




			<?php endwhile; ?>

			<?php pictorico_paging_nav(); ?>

		<?php else : ?>

			<?php get_template_part( 'content', 'none' ); ?>

		<?php endif; ?>

		</main><!-- #main -->
	</div><!-- #primary -->

<?php get_footer(); ?>

[cyberRobot]

Have you looked into using CSS positioning? More information can be found here:

https://developer.mozilla.org/en-US/docs/Web/CSS/position

[silver7]

 I tried using /  ol  li / but I didnt succeed. please guide me , i really need it.

[TapeGun007]

You can use <div> containers to seperate content into multiple layers. Therefore the div containers have to be positioned absolutely and marked with a z-index. for instance:

<div style="position: absolute; z-index:100">This is in background</div> 
<div style="position: absolute; z-index:5000">This is in foreground</div>

Of course the content also can contains images, etc.

This isn't a php related question however.

[silver7]

i haven't css Problem or Q, i asked how i can put Order Number on the thumbnail of post, just like top pic. please edite my php code(index.php).

(i use wordpress)