Erstellen von absolut positionierten Elementen auf OneNote-SeitenCreate absolute positioned elements in OneNote pages

Das „body“-Element einer OneNote-Seite kann mehrere direkt untergeordnete Elemente des Typs div, img oder object enthalten, die unabhängig voneinander auf der Seite positioniert werden können.The body of a OneNote page can contain multiple direct div, img, and object child elements that can be positioned independently on the page.

Attribute und PositionierungsverhaltenAttributes and positioning behavior

Mithilfe der Attribute data-absolute-enabled und style können Sie absolut positionierte Elemente auf einer Seite erstellen. Dabei gilt:Use the data-absolute-enabled and style attributes to create absolute positioned elements on a page, as follows:

  • Das „body“-Element muss data-absolute-enabled="true" enthalten.The body element must specify data-absolute-enabled="true". Fehlt diese Eigenschaft oder ist sie auf false gesetzt, werden alle „body“-Inhalte in einem absolut positionierten „div“-Element _default gerendert, das von der API erstellt wird. Dabei werden alle Positionseinstellungen ignoriert.If omitted or set to false, all body content is rendered inside a _default absolute positioned div that the API creates, and all position settings are ignored.

  • Nur Elemente des Typs div, img oder object können absolut positionierte Elemente sein.Only div, img, and object elements can be absolute positioned elements.

  • Absolut positionierte Elemente müssen style="position:absolute" enthalten.Absolute positioned elements must specify style="position:absolute".

  • Absolut positionierte Elemente müssen direkt untergeordnete Elemente des Elements body sein.Absolute positioned elements must be direct children of the body element. Alle direkt untergeordneten Elemente des „body“-Elements, die keine absolut positionierten Elemente des Typs div, img oder object sind, werden als statische Inhalte innerhalb des absolut positionierten „div“-Elements _default gerendert.Any direct children of the body that aren't absolute positioned div, img, or object elements are rendered as static content inside the absolute positioned _default div.

  • Absolut positionierte Elemente werden an den festgelegten oberen und linken Koordinaten relativ zur Startposition 0:0 in der linken oberen Ecke der Seite positioniert, über dem Titelbereich.Absolute positioned elements are positioned at their specified top and left coordinates, relative to the 0:0 starting position at the top, left corner of the page above the title area.

  • Wenn für ein absolut positioniertes Element die obere Koordinate oder die linke Koordinate nicht angegeben ist, wird die fehlende Koordinate auf ihren jeweiligen Standardwert gesetzt: top:120px oder left:48px.If an absolute positioned element omits the top or left coordinate, the missing coordinate is set to its default value: top:120px or left:48px. Diese Standardkoordinaten legen eine Position direkt unter dem Titelbereich fest.These default coordinates specify a position just below the title area. Das Weglassen von Koordinaten kann dazu führen, dass Elemente übereinander gestapelt werden.Be aware that omitting coordinates can result in elements that are stacked on top of each other.

  • Absolut positionierte Elemente können weder geschachtelt werden noch positionierte Elemente enthalten.Absolute positioned elements cannot be nested or contain positioned elements. Die API ignoriert alle für geschachtelte Elemente innerhalb eines absolut positionierten „div“-Elements angegebenen Positionseinstellungen, rendert die geschachtelten Inhalte innerhalb des absolut positionierten übergeordneten „div“-Elements und gibt eine Warnung in der Eigenschaft api.diagnostics in der Antwort zurück.The API ignores any position settings specified on nested elements inside an absolute positioned div, renders the nested content inside the absolute positioned parent div, and returns a warning in the api.diagnostics property in the response.

BeispielExample

Das folgende Beispiel enthält ein direkt untergeordnetes Element des Typs p, ein absolut positioniertes „div“-Element und ein nicht absolut positioniertes „div“-Element.The following example contains a direct p child, an absolute positioned div, and a non-absolute positioned div.

Eingabe-HTMLInput HTML

<body data-absolute-enabled="true">
    <p>This content will appear in the _default div.</p>
    <div style="position:absolute;top:175px;left:100px" data-id="div1">
      <p>This content will appear in an absolute positioned div.</p>
    </div>
    <div>
        <p>This content will also appear in the _default div.</p>
    </div>
</body>

Die API rendert das nicht absolut positionierte „div“-Element im „div“-Element „default“.The API renders the non-absolute positioned div in the default div. Beachten Sie: Die geschachtelten Tags des Typs <div> werden verworfen, da sie keine semantischen Informationen definieren (z. B. data-id).Note that the nested <div> tags are discarded because they do not define any semantic information (such as data-id).

Ausgabe-HTMLOutput HTML

<body data-absolute-enabled="true" style="font-family:Calibri;font-size:11pt">
    <div data-id="_default" style="position:absolute;left:48px;top:120px;width:624px">
        <p>This content will appear in the _default div.</p>
        <p>This content will also appear in the _default div.</p>
    </div>
    <div data-id="div1" style="position:absolute;left:99px;top:174px;width:624px">
        <p>This content will appear in an absolute positioned div.</p>
    </div>
</body>

BeispielExample

Das folgende Beispiel erstellt eine Seite, die ein einziges absolut positioniertes „div“-Element und ein einziges absolut positioniertes Bild enthält.The following example creates a page that contains one absolute positioned div and one absolute positioned image.

Eingabe-HTMLInput HTML

<html>
    <head>
        <title>Page Title</title>
    </head>
    <body data-absolute-enabled="true">
        <div style="position:absolute;width:280px;top:120px;left:68px">
            <p>Some text</p>
            <img style="width:120px" src="https://officeimg.vo.msecnd.net/en-us/files/018/949/ZA103278226.png" />
            <div>
                <p>More text inside a regular, nested div</p>
            </div>
        </div>
        <img style="position:absolute;width:360px;top:350px;left:300px" src="https://officeimg.vo.msecnd.net/en-us/files/018/949/ZA103278226.png" />
    </body>
</html>

Die OneNote-API wertet den Eingabe-HTML-Code aus und behält alle semantischen Inhalte sowie alle strukturellen Informationen bei, die von OneNote unterstützt werden.The OneNote API evaluates the input HTML and preserves all semantic content and any structural information that is supported by OneNote. Die daraus resultierende Seite wird wie in der Abbildung unten gerendert (ohne die sichtbaren Rahmen um das „div“-Element und das Bild).The resulting page renders as shown in the following image (but without the visible borders for the div and image).

Resultierende Seite mit absolut positioniertem „div“-Element und absolut positioniertem Bild

Beachten Sie die Änderungen am nicht berücksichtigten, geschachtelten „div“-Element aus dem Eingabe-HTML-Code.Notice the changes to the non-contributing, nested div from the input HTML. Die API behält die Inhalte des „div“-Elements bei, verwirft jedoch die Tags des Typs <div>, weil das „div“-Element keine semantischen Informationen definiert (z. B. data-id).The API preserves the div's content but discards the <div> tags because the div doesn't define semantic information (such as data-id).

Weitere Informationen dazu, wie die OneNote-API Eingabe-HTML und Ausgabe-HTML verarbeitet, finden Sie unter Eingabe- und Ausgabe-HTML auf OneNote-Seiten.For more information about how the OneNote API handles input and output HTML, see Input and output HTML for OneNote pages.

Unterstützte CSS-FormatattributeSupported CSS style attributes

Für alle absolut positionierten Elemente können eine obere Position und eine linke Position angegeben werden.All absolute positioned elements can specify top and left positions. Für „div“-Elemente und Bilder lässt sich die Breite, für Bilder zusätzlich auch die Höhe festlegen.Divs and images can specify width, and images can also specify height. Beispiel:For example:

<img style="position:absolute;top:140px;left:95px;width:480px;height:665px" src="..." />
AttributAttribute Unterstütztes ElementSupported element BeschreibungDescription
toptop div, img, objectdiv, img, object Y-Koordinate des oberen Rands des Elements, anzugeben ausschließlich in Pixel.The y-axis coordinate of the element's top border, in pixels only. Der Standardwert ist 120 Pixel.Default is 120 pixels.

Beispiel: top:140pxExample: top:140px
leftleft div, img, objectdiv, img, object X-Koordinate des linken Rands des Elements, anzugeben ausschließlich in PixelThe x-axis coordinate of the element's left border, in pixels only. Der Standardwert ist 48 Pixel.Default is 48 pixels.

Beispiel: left:95pxExample: left:95px
widthwidth div, imgdiv, img Die Breite des Elements, anzugeben ausschließlich in Pixel.The width of the element, in pixels only.

Beispiel: width:480pxExample: width:480px
heightheight imgimg Die Höhe des Elements, anzugeben ausschließlich in Pixel.The height of the element, in pixels only. Die Höhe von „div“-Elementen wird zur Laufzeit berechnet; angegebene Höhenwerte werden ignoriert.For divs, height is calculated at runtime and any specified height value is ignored.

Beispiel: height:665pxExample: height:665px

Andere Positionsattribute, beispielsweise z-index, werden ignoriert.Other position attributes, such as z-index, are ignored. Für absolut positionierte Bilder können Sie entweder das Attribut data-render-src oder das Attribut src verwenden.Absolute positioned images can use either the data-render-src or src attribute.

Informationen in der AntwortResponse information

Die OneNote-API gibt in der Antwort die nachfolgenden Informationen zurück.The OneNote API returns the following information in the response.

AntwortdatenResponse data BeschreibungDescription
ErfolgscodeSuccess code HTTP-Statuscode 201 bei erfolgreich ausgeführter POST-Anforderung, HTTP-Statuscode 204 bei erfolgreich ausgeführter PATCH-AnforderungA 201 HTTP status code for a successful POST request, and a 204 HTTP status code for a successful PATCH request.
FehlerErrors Informationen zu OneNote-Fehlern, die Microsoft Graph zurückgeben kann, finden Sie unter Fehlercodes für OneNote-APIs in Microsoft Graph.Read Error codes for OneNote APIs in Microsoft Graph to learn about OneNote errors that Microsoft Graph can return.

BerechtigungenPermissions

Zum Erstellen oder Aktualisieren von OneNote-Seiten müssen Sie die entsprechenden Berechtigungen anfordern.To create or update OneNote pages, you'll need to request appropriate permissions. Wählen Sie die niedrigste Berechtigungsstufe, die Ihre App zur Erledigung ihrer Aufgaben benötigt.Choose the lowest level of permissions that your app needs to do its work.

Berechtigungen für BEITRAG-SeitenPermissions for POST pages

  • Notes.CreateNotes.Create
  • Notes.ReadWriteNotes.ReadWrite
  • Notes.ReadWrite.AllNotes.ReadWrite.All

Berechtigungen für PATCH-SeitenPermissions for PATCH pages

  • Notes.ReadWriteNotes.ReadWrite
  • Notes.ReadWrite.AllNotes.ReadWrite.All

Weitere Informationen zu Berechtigungsbereichen und deren Funktionsweise finden Sie unter OneNote-Berechtigungsbereiche.For more information about permission scopes and how they work, see OneNote permission scopes.

Siehe auchSee also