位置：绝对值是否未成功定位到与静态值不同的位置的最近的父祖代？

Question

我正在创建餐厅菜单。我在三个段落的右上角都需要菜单标题。我已经将box-sizing设置为border-box的值，并且使段落浮动以保持在一行上。到目前为止，这些段落对992px或更大的像素响应。但是，菜单标题（标题）不响应段落的位置。我将它们浮动到右上角，以显示一个位置为绝对的992px屏幕。段落和菜单标题均位于设置为position：relative的id：容器下。但是，在调整浏览器大小时，菜单标题从右上角向左移动。

我已经将项目设置为position：CSS中的absolute。我已将id：容器下的段落和菜单标题设置为相对。我正在使用媒体查询。

这是我的代码的链接： https://jsfiddle.net/0cufrjw6/

Main problem:
    #container{
        position: relative;
    }

    @media (min-width: 992px) {

        p {
            width: calc(33.33% - 40px) ;
            float: left;
        }   

        .item1{
            position: absolute; 
            left: 23.5%;
        }

        .item2{
            position: absolute;
            left: 60.25%
        }

        .item3{
            position: absolute;
            left: 92.25%
        }
          }