How to keep text in same position?


Tags: css,css3,reactjs

Problem :

In my reactjs app I have a collapse implemented but I would like to keep the text under this in the same position. I tried this css:

.cart{
     position: relative;
      top:70px;
}

This does not work, how can I keep the 'this stays here' in the same position, with for example some blurring if possible?

More code here: codepen



Solution :

Try this:

working for me

HTML:

<head>
  <title>React JS</title>
</head>

<body>
  <div id="app"></div>
<p>this stays here</p>
</body>

</html>

CSS:

    html, body {
      margin: 0;
      font-family: 'Roboto', Arial, sans-serif;
      font-size: 1.2em;
    }

    .cart
    {
      position:relative;
    }

p {
  position: absolute;
  top:30px;
  z-index:-1;
}

    CSS Howto..

    CSS - how to place an error/hint message to the right of the input box

    How to transform Menu icon to Arrow icon? [closed]

    Show / Hide HTML using swatch / HTML 5 - dynamic HTML

    How to find elements and siblings within a tree

    How to safely display user's text containing all html/css in rails 3

    How to reference / link to a Css-File styling elements in a webview for Android

    How to apply multiple css radial gradients to a single element

    How do i create a gem which will generate a css file from a template

    How to anchor a dynamic div to the screen?

    Why are items showing up in my instead of [closed]

    How to set the padding of QTableView cells through CSS?

    How to add a table inside a div with its CSS working

    how do i include css based on screen size of the device

    How to use Javascript in a innerHTML inline css scenario?

    How to make CSS zig-zag borders? [duplicate]

    How can I use a CSS selector to match two classes being present?

    How to inline the contents of an entire stylesheet with Wordpress?

    CSS how to target 2 attributes?

    CSS - How to add dot between navigation title

    How is percentage calculated when using it for margin and padding?

    How to have two items be placed next to each other in HTML?

    How to make JS/Jquery Css and HTML popup

    How to convert css into bss

    Ambiguous match, found 2 elements matching css, how to get to the second one?

    how to center background image in window resize

    How to get menu text vertically aligned with inherited height

    How to add randomness to the blink effect? [closed]

    How to Have the Div Aligned to the Middle, and That Relative to the Parent Div?

    parse JSON to HTML table: How do I format the css of the table?

    How to highlight a row in a table on certain occasions