title: Positioning Image in next js
body: <p>I want to make my Image on the most right of the page, I try to modify with <code>position: absolute</code> and <code>right: 0</code>.
  I also try to make parent position to relative, and image position to absolute, but why it doesn't work?</p>
  <p>here's in my jsx file</p>
  <pre><code>        &lt;div className={styles.images}&gt;
            &lt;Image
              src=&quot;/cloud.svg&quot;
              alt=&quot;Picture of the author&quot;
              layout=&quot;fill&quot;
              className={styles.cloud}
            /&gt;
            &lt;Image
              src=&quot;/kuil.svg&quot;
              alt=&quot;Picture of the author&quot;
              height={200}
              width={600}
              layout=&quot;intrinsic&quot;
              className={styles.building}
            /&gt;
          &lt;/div&gt;
  </code></pre>
  <p>Also in my css file.</p>
  <pre><code>.images {
      position: relative;
      margin: 90px auto 0 auto;
  }
  
  .building {
      position: absolute;
      top: 0;
      right: 0 !important;
      bottom: 0 !important;
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/D1uXc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/D1uXc.png" alt="enter image description here" /></a></p>