Is there a way to position the Image component from next/image using absolute positioning?

Is it possible to use an element Image from 'next/image' with the CSS style 

{ position: absolute; left: 50% }
? It appears that it is not being applied.

For example:

import React from 'react'
import Image from 'next/image'
import styled from 'styled-components'

const Container = styled.div`
  position: relative;
`

const Test = styled(Image)`
 position: absolute;
 left: 50%;
`

const Page: React.FC = () => {
  return (
    <Container>
      <Test src{someImg.webp} width={500} height={500} objectFit="none" />
    </Container>
  )
}

export default Page;
reactjstypescriptnext.jsstyled-componentsnextjs-image

Answer №1

To display your image within another parent div with a specified position, you can follow this code:

import React from 'react'
import Image from 'next/image'
import styled from 'styled-components'

const Container = styled.div`
  position: relative;
`
 const ImageContainer = styled.div`
  position: absolute;
  left: 50%;
`


const Page: React.FC = () => {
  return (
    <Container>
     <ImageContainer>
        <Image src={someImg.webp} width={500} height={500} objectFit="none"/>
     </ImageContainer>
    </Container>
  )
}

export default Page;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Avoiding repetition in json array using reactjs with the help of axios

After receiving guidance from @Akrion, I managed to resolve the issue! Check out my comments below our conversation for the solution. I am relatively new to reactJS and axios, but I recently collaborated with a classmate on a project. Now, I find myself s ...

javascriptarraysjsonreactjsaxios

I encountered an issue with the mui TextField component in React where it would lose focus every time I typed a single character, after adding key props to

I'm encountering an issue with a dynamic component that includes a TextField. Whenever I add the key props to the parent div, the TextField loses focus after typing just one character. However, when I remove the key props, everything works as expected ...

javascriptreactjsmaterial-ui

When using React.js with Leaflet, ensure that the useEffect hook is only run on Mount when in the

I have encountered an issue where I need to ensure that the useEffect Hook in React runs only once. This is mainly because I am initializing a leaflet.js map that should not be initialized more than once. However, anytime I make changes to the component&a ...

javascriptreactjsleafletuse-effect

Angular - optimizing performance with efficient HTTP response caching tactics

I'm managing numerous services that make requests to a REST service, and I'm looking for the optimal method to cache the data obtained from the server for future use. Can someone advise on the most effective way to store response data? ...

angularhttptypescriptcaching

Leverage async/await within your React component

Do you think it's a good idea to directly use async/await in a React component and then store the result in the Redux store? Here's an example: class User extends Component { render() { return <div>{this.props.user.name}</d ...

reactjsreduxasync-await

In React, is it typical to maintain identical values in both state and ref?

When working with my React app, I encountered a situation where I needed to access state values inside setTimeout() and setInterval(). However, due to closures being bound to their context once created, using state values in these functions would not refle ...

javascriptreactjsreact-hooksuse-stateuse-ref

"Utilizing the power of mapping in React to dynamically generate and return an

Hello everyone! I'm currently working on a project where I am making a get request to a Google API and fetching some data. Initially, the state value is empty, but after receiving the ajax response, I expect the state values to be updated using setSta ...

javascriptreactjs

Transferring information between Express and React through the Contentful API

I have embarked on a journey to explore Contentful's headless CMS, but I am encountering a challenge with their API client. My goal is to combine Express with React for server-side rendering, and I am utilizing this repository as my starting point. S ...

javascriptexpressreactjses6-promisecontentful

Although server-side rendering is utilized with react-query, JSON data continues to be displayed in the network tab

As per my understanding, the only way to conceal a JSON return from an API call is through server rendering. I have implemented this on all pages using Next.js; however, the network tab still displays a JSON with my data on pages where useInfiniteQuery and ...

reactjsnext.jsserver-side-renderingreact-query

Exploring Responsive UI Testing in React using Material-UI Components (Hidden, Grid, Breakpoints) with Enzyme or React Testing Library

Looking to verify responsiveness in Material-UI? Here is an example: import React from "react"; import Hidden from "@material-ui/core/Hidden"; const HideOnMobile = (props) => { return <Hidden xsDown>{props.children}</Hid ...

reactjsunit-testingmaterial-uienzymereact-testing-library

Leveraging the power of NextJS in tandem with the versatile

Encountering challenges while attempting to merge NextJS and @emotion. In a newly created NextJS application with basic @emotion replacements, running yarn build; yarn start produces a functional but uninspiring app, although the styles are displaying cor ...

next.jsyarnpkgemotion

The correct way to assign a value within an Angular Observable subscribe function

Having some trouble with a basic form using @angular/material (although the material aspect shouldn't make a difference) that is structured like this: <div *ngIf="user"> <form> <mat-form-field> <m ...

angulartypescriptforms

Looking for a SSR Component to Choose Dates?

In the process of designing a landing page, I encountered a challenge with incorporating a date picker feature. My goal is to have users select a date and then be redirected to another page upon clicking a button. The technology stack includes NextJS where ...

reactjstypescriptnext.jsreact-hooks

Connecting to a pathway of Material-UI menu items

I am currently utilizing Material-UI's menu components as part of my project requirements. However, I am encountering difficulties in properly routing each MenuItem to an existing route within my application. As a temporary solution, I have resorted ...

javascriptreactjsuser-interfacereact-routermaterial-ui

React - The ._id received by the Modal inside the map function is incorrect

My map is generating edit and delete buttons. The delete button requires confirmation, so I implemented a modal. When I use console.log(additive._id) on the first delete button, I get the correct ._id, but when I click the confirm button inside the modal, ...

javascriptreactjsmapping

Most effective approach to managing state in a React UI Component

I recently delved into the world of React. I've been using it to build a design system library for my work, which consists of standalone UI components tailored for use in React applications. I've developed a specific approach to managing the sta ...

cssreactjs

An alternative MUI option for AntD notifications

I've been utilizing antD's notification API for a while now, but in my latest project, I've switched to MUI. To streamline error handling for API requests, I'm using a shared Axios instance that includes onSuccess and onError methods. I ...

reactjserror-handlingaxiosmaterial-uiantd

Expanding Nested List Components in Material-UI using ReactJS by utilizing the URL structure

I'm currently working with ReactJS and Material-UI. Is there a way to have the MUI nested list display specific items based on the URL? For example, if a user is on /inbox/starred/, I want the Inbox item to be open and Starred to be highlighted. I att ...

reactjsroutesmaterial-uinested-lists

The Element type does no feature a Typescript property

Despite my attempts to include a declaration file and various other solutions, I'm still struggling with this issue: The goal is to define the visible property as a function on the HTML Element object. However, the linter keeps flagging visible with ...

typescripttypescript-typings

Material UI - Clear all designs from the slate

Is it possible to completely override all default material-ui styles and implement your own custom style guide for components? This would involve removing all material-ui styles and starting fresh with customized html skeletons. Creating a new theme with m ...

cssreactjsstylingmaterial-ui