How to position a div inside another div in reactJs?-CodePudding

I want to put the children div on end of parent div , but positioning is not working. i'm using reactJs, NextJs and styled-components for this code;

reactjs code:

<a href={links[indexImg]} target="_blank" >
    <Carousel
        image={images[indexImg]}
    >
        <DescriptionText>
            <p>{descriptions[indexImg]}</p>
        </DescriptionText>
    </Carousel>
</a>

styled-componentes code:

export const DescriptionText = styled.div`
    color: white;
    background-color: black;
    background-position: 20px;
    opacity: 0.5;
`;
export const Carousel = styled.div`
    position: relative;
    border-radius: 50px;
    border: solid;
    border-width: 3px;
    border-color: #C2C2C2;
    margin: 0;
    height: 100%;
    width: 100%;
    justify-content: flex-end;
    background-size: cover;
    background-position: center;
    background-image:url(${props => props.image});
`;

CodePudding user response：

first of all install bootstrap from terminal using the command

npm install react-bootstrap bootstrap

suppose you are working with components like Leftsidebar.js , Rightsidebar.js and Content.js which you have imported to index.js

to do this you have install bootstrap in your react.js

follow the steps

index.js blow

import React from 'react';
   import ReactDom from 'react-dom';
   import Leftsidebar from './Leftsidebar';
   import Rightsidebar from './Rightsidebar';
   import Content from './Content';
    
    ReactDom.render(
    
    // outer most div
    <div class='row'>
    
    <div class='col-4'>
    <Leftsidebar/>
    </div>
    
    
    <div class='col-4'>
    <Content/>
    </div>
    
    <div class='col-4'>
    <Rightsidebar/>
    </div>
    
    </div>
    
    
    ,documment.getelementbyId('root');
    );

simple we have used the grid system to divide the screen into 4 different part out of 12 secondly the above code is just typed in the text editor .but my aim was to guide you how to show data in different layout or positions using react js and it work because i myself use row column to arrange data in position and it is the easiest method .

CodePudding user response：

if your inner division has position absolute and your outer one gets position relative, the inner division will adjust itself inside the outer one. for example if you want the inner one to stick on bottom of the outer one you can do this

.outer{
position:relative
}
.inner{
postion:absolute;
botoom:0
}