absolute position hiding content

Question

I have two snippets below. The first one is an example from fullcalendar documentation. notice that #calendar-container has position:fixed. I need to change this so that the position is not fixed relative to the viewport but to the wrapping container #bc-container.

In the second snippet I set #bc-container position:relative and I set #calendar-container position:absolute. The content disappears.

I'm not looking to transform a fixed element. I want to use absolute positioning.

What's the correct way for doing this?

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'UTC',
    initialView: 'dayGridMonth',
    height: '100%',
    events: 'https://fullcalendar.io/demo-events.json'
  });

  calendar.render();
});

html,
body {
  overflow: hidden;
  /* don't do scrollbars */
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

#calendar-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.fc-header-toolbar {
  /*
  the calendar will be butting up against the edges,
  but let's scoot in the header's buttons
  */
  padding-top: 1em;
  padding-left: 1em;
  padding-right: 1em;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.1/main.css">
<link href='https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.1/css/all.css' rel='stylesheet'>



<div id='bc-container'>
    <div id='calendar-container'>
        <div id='calendar'></div>
    </div>
</div>




<script src="https://code.jquery.com/jquery.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.1/main.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" 
        integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'UTC',
    initialView: 'dayGridMonth',
    height: '100%',
    events: 'https://fullcalendar.io/demo-events.json'
  });

  calendar.render();
});

html, body {
  overflow: hidden; /* don't do scrollbars */
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

#calendar-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.fc-header-toolbar {
  /*
  the calendar will be butting up against the edges,
  but let's scoot in the header's buttons
  */
  padding-top: 1em;
  padding-left: 1em;
  padding-right: 1em;
}

#bc-container{
position:relative;}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" 
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.1/main.css">
        
        <link href='https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.1/css/all.css' rel='stylesheet'>
        
        
        <div id='bc-container'>
            <div id='calendar-container'>
                <div id='calendar'></div>
            </div>
        </div>
        
        
        <script src="https://code.jquery.com/jquery.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.1/main.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" 
        integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

Does this answer your question? [Fixed position but relative to container](https://stackoverflow.com/questions/6794000/fixed-position-but-relative-to-container) — disinfor, Feb 08 '21 at 21:39

disinfor · Accepted Answer · 2021-02-09T15:57:56.247

To do this, you can add transform: translate(0,0) to the #bc-container element.

That will allow a fixed position element to reference its parent instead of the DOM.

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'UTC',
    initialView: 'dayGridMonth',
    height: '100%',
    events: 'https://fullcalendar.io/demo-events.json'
  });

  calendar.render();

});

html,
body {
  overflow: hidden;
  /* don't do scrollbars */
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

#bc-container {
  transform: translate(0, 0);
  height: 100vh;
}

#calendar-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.fc-header-toolbar {
  /*
  the calendar will be butting up against the edges,
  but let's scoot in the header's buttons
  */
  padding-top: 1em;
  padding-left: 1em;
  padding-right: 1em;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.1/main.css">
<link href='https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.1/css/all.css' rel='stylesheet'>



<div id='bc-container'>
  <div id='calendar-container'>
    <div id='calendar'></div>
  </div>
</div>




<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.1/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

why use transform when you can use absolute? only the height needs to be specified — DCR, Feb 08 '21 at 23:26
You asked about using `position: fixed` for your child element to be relative to the containing element. `transform` on the parent is how you achieve that. You never asked about absolute position. — disinfor, Feb 09 '21 at 02:57
The question stated clearly I needed to make the position not fixed relative to the viewport. I edited the question because the answers were still using fixed — DCR, Feb 09 '21 at 12:38
In your example code you have `position: fixed`. This answer addresses using `position: fixed` against a parent element and not the viewport. I realize based on your comments that this answer does not meet your final requirements (as evidence of saying using `position: absolute`) - either I misunderstood what you question was initially asking or it was a bit unclear. The down vote seems unnecessary. — disinfor, Feb 09 '21 at 15:14
Also, this answer DOES NOT transform a fixed element. It adds `transform: translate()` to the parent. This forces a fixed child to position against the parent element (in this case `#bc-container`). I only added the 100px so you could see it working. You could easily use `transform: translate(0,0)` on `#bc-container` — disinfor, Feb 09 '21 at 15:21

absolute position hiding content

1 Answers1